鸿蒙HarmonyOS NEXT沉浸式技术方案

fengyongge_

已于 2024-12-20 17:49:05 修改

阅读量509

点赞数 4

分类专栏： HarmonyOS开发的那些事文章标签： HarmonyOS NEXT 鸿蒙沉浸式

于 2024-10-31 23:57:13 首次发布

本文链接：https://blog.csdn.net/f917386389/article/details/143420294

版权

HarmonyOS开发的那些事专栏收录该内容

16 篇文章

订阅专栏

沉浸式是什么

沉浸式让整个App的界面浸入整个屏幕，在某些业务场景下，一种友好的用户体验，以下举例截图为华为商城APP。

鸿蒙上沉浸式实现

方案一：设置窗口全屏模式

调用setWindowLayoutFullScreen接口，设置应用主窗口为全屏布局；setWindowSystemBarProperties接口，设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性，使之保持与主窗口显示协调一致，从而达到沉浸式效果。

也就是默认全栈统一沉浸式，如果路由方式是导航路由的话，使用导航拦截器，将不需要沉浸式页面设置顶部和底部margin，顶部为动态获取状态栏高度，底部为动态获取系统导航栏高度。

//获取状态栏和导航栏高度
 windowStage.getMainWindow().then((windowObj) => {
      windowObj.setWindowLayoutFullScreen(true)
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
      let avoidArea = windowObj.getWindowAvoidArea(type);
      let bottomRectHeight = px2vp(avoidArea.bottomRect.height);
      let type_status = window.AvoidAreaType.TYPE_SYSTEM;
      let area: window.AvoidArea = windowObj.getWindowAvoidArea(type_status);
      let statusBarHeight = px2vp(area.topRect.height);
    })

每一个页面需要实时获取状态栏和导航栏的高度，在windowStage实时获取到状态栏和导航栏高度时，需要AppStorage.setOrCreate存储，然后通过@StorageProp获取。

或者简单粗暴在页面显示或隐藏时，使用Window.setWindowLayoutFullScreen()方法设置窗口是否为全屏模式，使用Window.setWindowSystemBarEnable()方法设置状态栏和导航条显隐。但是这种显隐状态栏和导航条的做法，官方限制只能是游戏类APP。

深色背景下状态栏颜色适配场景

在某些将深色背景延伸到状态栏的沉浸式页面中，需要设置状态栏时间文字、信号图标、电量图标等内容为浅色进行适配，避免状态栏内容不清晰，以此提升用户的视觉体验。

//设置状态栏和导航栏颜色
export function configSystemBarWhiteColor() {
  let systemBarProperties: ESObject = {
    statusBarContentColor: '#000000',
    navigationBarContentColor: '#000000'
  }
  try {
    window.getLastWindow(getContext(), (err: BusinessError, data) => {
      const errCode: number = err.code;
      if (errCode) {
        return;
      }
      let windowClass: window.Window | undefined = data;
      windowClass.setWindowSystemBarProperties(systemBarProperties, (err) => {
        if (err.code) {
          console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in setting the system bar properties.');
      });
    });
  } catch (exception) {
  }
}

方案二：扩展组件安全区域

全栈不设置全屏的情况下，使用expandSafeArea属性扩展背景组件安全区域。由于expandSafeArea属性不影响子组件的布局，所以Tabs组件内的内容默认在安全区域布局，避让状态栏和导航条。

     Column()
          .height('100%').width('100%')
          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])