0
点赞
收藏
分享

微信扫一扫

harmonyOS 手机,双折叠,平板,PC端屏幕适配

由于HarmonyOS设备的屏幕尺寸和分辨率各不相同,开发者需要采取适当的措施来适配不同的屏幕。


1.EntryAbility.ets文件里:onWindowStageCreate方法里判断设备类型,

如果是pad,需全屏展示(按客户需求来,本次需求按全屏展示),功能实现如下:


onWindowStageCreate(windowStage: window.WindowStage): void {

  windowStage.getMainWindow().then((windowClass) => {

    try {

      //判断是否是pad

      if(deviceInfo.deviceType == 'tablet') {//pad

        //pad横屏

        let orientation = window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED;

        let promise = windowClass.setPreferredOrientation(orientation);//如果是pad横屏

        promise.then(() => {

          console.info('Succeeded in setting the window orientation.');

        }).catch((err: BusinessError) => {

          console.error(`Failed to set the window orientation. Cause code: ${err.code}, message: ${err.message}`);

        });

      }

    }catch (exception) {

      console.error(`Failed to set window orientation. Cause code: ${exception.code}, message: ${exception.message}`);

    }

    // 获取窗口尺寸,存入AppStorage

    AppStorage.setOrCreate('winWidth', windowClass.getWindowProperties().windowRect.width);

    AppStorage.setOrCreate('winHeight', windowClass.getWindowProperties().windowRect.height);

    // 监听窗口尺寸变化

    windowClass.on('windowSizeChange', (windowSize) => {//监听窗口尺寸变化

      AppStorage.setOrCreate('winWidth', windowSize.width);//如果窗口变化了,立马更新存储值-宽

      AppStorage.setOrCreate('winHeight', windowSize.height);//如果窗口变化了,立马更新存储值-高

      console.log('宽高',String(windowSize.width), String(windowSize.height))//

    });

  });

  // Main window is created, set main page for this ability

  console.info('onWindowStageCreate');

  AppStorage.setOrCreate('windowStage',windowStage);

  AppUtil.init(this.context);

  try {

    let windowClass: window.Window = windowStage.getMainWindowSync()

    AppStorage.setOrCreate('windowClass', windowClass)

    // 设置窗口全屏

    windowClass.setWindowLayoutFullScreen(true)

    let topRect = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_CUTOUT).topRect//获取顶部安全区域

    let bottomRect = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect//获取底部安全区域

    // 缓存window窗口对象

    AppStorage.setOrCreate('windowClass', windowClass);

    AppStorage.setOrCreate('bottomAreaRectHeight', bottomRect.height);//把height-底部安全区域存储

    AppStorage.setOrCreate('topAreaRectHeight', topRect.height );//height-顶部安全区域存储

    this.updateBreakPoint(windowClass.getWindowProperties().windowRect.width, windowClass.getWindowProperties().windowRect.height);//获取窗口的宽 度和高度,计算此时是什么场景:直板机、折叠屏、pad等

    windowClass.on('windowSizeChange', (windowSize: window.Size) => {

      console.log('windowSizeChange',windowSize.width, windowSize.height)

      this.updateBreakPoint(windowSize.width, windowSize.height);//

    })

  } catch (exception) {

    Logger.error(`Failed to obtain the main window. Cause code: ${exception.code}, message: ${exception.message}`);

  }

windowStage.loadContent('pages/LaunchPage', (err, data) => { if (err.code) { Logger.error('Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } }); }



private updateBreakPoint(windowWidth: number, windowHeight: number): void {

  let curBp: string = '';

  let type = deviceInfo.deviceType

  if (type=='2in1'){//如果是电脑,直接走pad的适配(需要注意,如果是电脑,需要修改一些交互,比如键盘(onKeyEvent事件))

    AppStorage.setOrCreate('breakPoint', 'xl')

    return

  }

  // 平板,下面的就是根据当前实时屏幕尺寸,计算是处于哪种情况 md-直板机 lg-折叠屏  xl-pad(前面已提到,电脑的UI和pad的UI一致)

  if(type == 'tablet') {

    curBp = 'xl'

    AppStorage.setOrCreate('breakPoint', curBp)

  } else {

    console.log('windowHeight/windowWidth',windowWidth, windowHeight, windowHeight/windowWidth > 1.5)

    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;

    if (windowWidthVp < 700) {

      curBp = 'md'

    } else {

      curBp = 'lg'

    }

    if(windowHeight/windowWidth > 1.5 == true) {

      curBp = 'md'

    } else {

      if(windowHeight<1500) {

        curBp = 'md'

      } else {

        curBp = 'lg'

      }

    }

    let ret: boolean = false;

    ret = display.isFoldable();

    console.log("curBp", curBp, windowWidthVp)

    if(deviceInfo.deviceType == 'phone' && ret == false) {

      AppStorage.setOrCreate('breakPoint', 'md')

    } else {

      AppStorage.setOrCreate('breakPoint', curBp)

    }

  }

  console.log('设备类型', curBp)

}

//以上的内容都是在应用入口完成,判断好设备类型和视口大小


举报

相关推荐

0 条评论