鸿蒙开发之沉浸式安全区模式

概述

鸿蒙开发中的沉浸式安全区模式主要关注于通过调整应用界面与系统UI（如状态栏、导航栏）的显 示效果，来减少系统界面的突兀感，使用户能够获得更加沉浸和一致的UI体验。

设计要素

1. UI元素避让处理: 确保导航条底部区域可以响应点击事件，而其他可交互UI元素和应用关键信息则不建议放置到导航条区域，以避免与系统UI产生冲突或干扰。
2. 沉浸式效果处理:通过调整状态栏和导航条的颜色，使其与界面元素颜色相匹配，从而消除明显的突兀感，实现更加和谐的视觉效果。

具体实现

1. 窗口全屏方案

• 开启全屏模式

enableFullScreen() {
  window.getLastWindow(getContext()).then((windowStage: window.Window) => {
    const area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    const topHeight = px2vp(area.topRect.height)
    if (topHeight > 0) {
      windowStage.setWindowLayoutFullScreen(true)
    }
  })
}

• 取消全屏模式

disableFullScreen() {
  window.getLastWindow(getContext()).then((windowStage: window.Window) => {
    windowStage.setWindowLayoutFullScreen(false)
  })
}

2. 组件安全区方案

• 设置安全区

// 设置安全区
AppStorage.setOrCreate('topHeight', topHeight)

// 取消安全区
AppStorage.setOrCreate('topHeight', 0)

• 设置安全区的颜色为白色

settingStatusBarLight() {
  this.settingStatusBar({ statusBarContentColor: '#FFFFFF' })
}

• 设置安全区的颜色为黑色

settingStatusBarLight() {
  this.settingStatusBar({ statusBarContentColor: '#FFFFFF' })
}

settingStatusBar(config: window.SystemBarProperties) {
  window.getLastWindow(getContext()).then((windowStage: window.Window) => {
    windowStage.setWindowSystemBarProperties(config)
  })
}

代码调用

在我们的.ets页面中, 页面启动的时候调用

aboutToAppear(): void {
  windowManager.settingStatusBarLight()
  AppStorage.setOrCreate('topHeight',0)
}

在我们离开页面时候, 取消全屏

aboutToDisappear(): void {
  windowManager.settingStatusBarDark()
  windowManager.enableFullScreen()
  // AppStorage.setOrCreate('bottomHeight',-20)
}