【HarmonyOS】开启沉浸式（全屏）并获取顶部状态栏和底部导航条高度

鸿蒙开启沉浸式（全屏）并获取顶部状态栏和底部导航条高度

1. 获取主窗口

const win = windowStage.getMainWindowSync()

2. 开启沉浸式

win.setWindowLayoutFullScreen(true)

3. 顶部状态栏高度

// 获取状态栏区域
	let area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
// 顶部状态栏高度
	let statusBarHeight = px2vp(area.topRect.height) //这个的单位是px  将单位转换为VP,这个方法是px转vp

4. 获取到导航条区域的高度

 // 获取导航条区域
    let avoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
// 获取到导航条区域的高度
    let indicatorHeight = px2vp(avoidArea.bottomRect.height);

5. 全局状态存储

// 将获取到的高度存储到AppStorage，让每个tab页面都能拿到这个值
    PersistentStorage.persistProp('topHeight', statusBarHeight)
    PersistentStorage.persistProp('bottomHeight', indicatorHeight)

完整代码

   export class windowManager {
   static fullScreen(windowStage: window.WindowStage) {
    const win = windowStage.getMainWindowSync()
    // 开启沉浸式模式
    win.setWindowLayoutFullScreen(true)
    // 获取设备的安全高度
    let area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    // 顶部状态栏高度
    let statusBarHeight = px2vp(area.topRect.height) // 将单位转换为VP,这个方法是px转vp
    // 获取导航条区域
    let avoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
    // 获取到导航条区域的高度
    let indicatorHeight = px2vp(avoidArea.bottomRect.height);
    // console.log("沉浸式= ", statusBarHeight, indicatorHeight)
    // 将获取到的高度存储到AppStorage，让每个tab页面都能拿到这个值
    PersistentStorage.persistProp('topHeight', statusBarHeight)
    PersistentStorage.persistProp('bottomHeight', indicatorHeight)
  }
  }

开启沉浸式

在EntryAbility里开启沉浸式

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

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

UI页面使用

通过AppStorage.get() 方法直接获取

@Styles
function bottomHeightStyle() {
  .padding({ bottom::Number(AppStorage.get('bottomHeight')) })
}

扩展

如果需要适配小屏和分屏模式 页面布局能够根据设备状态自动调整，则需要动态获取窗口规避区的信息

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