鸿蒙HarmonyOS NEXT沉浸式技术方案

沉浸式是什么

沉浸式让整个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);
    })

实际操作中会遇到的问题点：
每一个页面不可能实时获取状态栏和导航栏的高度，这就需要在获取到时候设置到AppStorage，但是在各个页面获取时候，如果拿不到就会存在样式问题。

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属性扩展安全区域属性，可以扩展到状态栏、扩展到导航栏。

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

组件设置expandSafeArea之后生效的条件为：

1.type为SafeAreaType.KEYBOARD时默认生效，组件不避让键盘。

2.设置其他type，组件的边界与安全区域重合时组件能够延伸到安全区域下。例如：设备顶部状态栏高度100，那么组件在屏幕中的绝对位置需要为0 <= y <= 100。

组件延伸到安全区域下，在安全区域处的事件，如点击事件等可能会被系统拦截，优先给状态栏等系统组件响应。

滚动类容器内的组件不建议设置expandSafeArea属性，如果设置，需要按照组件嵌套关系，将当前节点到滚动类祖先容器间所有直接节点设置expandSafeArea属性，否则expandSafeArea属性在滚动后可能会失效