鸿蒙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);
    })

每一个页面需要实时获取状态栏和导航栏的高度，在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])

顶部图片延伸场景

页面顶部的图片要延伸到状态栏中去，形成沉浸式效果。顶部的返回按钮等交互组件，要合理避让状态栏。

滚动列表底部延伸场景

官方在列表滚动场景中，要求滚动时内容可与导航条区域重合，滚动到底部时，底部内容需避让导航条。

注意：给组件设置expandSafeArea不生效的情况

1、设置expandSafeArea属性进行组件绘制扩展时，组件不能设置固定宽高尺寸。可尝试用百分比或padding改变组件宽高。

2、设置expandSafeArea属性的组件需与安全区域边界重合。

3、当设置expandSafeArea属性的组件的父组件是滚动类容器，需设置父组件的clip属性，不裁剪内部组件。

关注公众号：移动端开发的那些事

最后编辑于：2024.12.20 17:50:59