【HarmonyOS】开启沉浸式（全屏）并动态获取窗口规避区的信息

鸿蒙开启沉浸式（全屏）并动态获取窗口规避区的信息

动态获取窗口规避区的信息在移动端开发中至关重要，它能够提升用户体验，通过确保应用在不同设备和屏幕尺寸下合理利用可用空间，避免内容被状态栏或导航栏遮挡。此外，这种技术支持响应式设计，使得页面布局能够根据设备状态自动调整，适应小屏和分屏模式，确保信息的可见性和可访问性，从而解决了布局错位和内容遮挡的问题。

知识点

1. setWindowLayoutFullScreen 设置沉浸式(全屏)
2. AppStorage 应用全局的UI状态存储, 用来存储规避区高度
3. @StorageProp 装饰器, 响应式获取规避区高度变化 点击查看详细文档

主要代码

   export class windowManager {
   static fullScreen(windowStage: window.WindowStage) {
    const win = windowStage.getMainWindowSync()
    // 开启沉浸式模式
    win.setWindowLayoutFullScreen(true)

    // 注册监听函数，动态获取窗口规避区的信息
    win.on('avoidAreaChange', (data) => {
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = px2vp(data.area.topRect.height);
        AppStorage.setOrCreate('topHeight', topRectHeight);
      } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = px2vp(data.area.bottomRect.height);
        AppStorage.setOrCreate('bottomHeight', bottomRectHeight);
      }
    });
  }
  }

开启沉浸式

在EntryAbility里开启沉浸式

async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
 // Main window is created, set main page for this ability

 windowManager.fullScreen(windowStage); // 开启沉浸式
}

UI页面使用

以获取底部导航条为例, 在@Component中通过装饰器响应式获取到bottomHeight, 在UI中直接使用

@StorageProp('bottomHeight') bottomHeight: number = 0; // 底部导航条区域的高度