ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【HarmonyOS】开启沉浸式（全屏）并获取顶部状态栏和底部导航条高度 [打印本页]

---

作者: 张国伟    时间: 2025-1-21 01:17
标题: 【HarmonyOS】开启沉浸式（全屏）并获取顶部状态栏和底部导航条高度
鸿蒙开启沉浸式（全屏）并获取顶部状态栏和底部导航条高度

1. 获取主窗口

1. const win = windowStage.getMainWindowSync()

复制代码

2. 开启沉浸式

1. win.setWindowLayoutFullScreen(true)

复制代码

3. 顶部状态栏高度

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

复制代码

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

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

复制代码

5. 全局状态存储

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

复制代码

完整代码

1.    export class windowManager {   static fullScreen(windowStage: window.WindowStage) {    const win = windowStage.getMainWindowSync()
2.     // 开启沉浸式模式    win.setWindowLayoutFullScreen(true)
3.     // 获取设备的安全高度    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页面都能拿到这个值
4.     PersistentStorage.persistProp('topHeight', statusBarHeight)
5.     PersistentStorage.persistProp('bottomHeight', indicatorHeight)
6.   }  }

复制代码

开启沉浸式

在EntryAbility里开启沉浸式

1. async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
2. // Main window is created, set main page for this ability
4. windowManager.fullScreen(windowStage); // 开启沉浸式
5. }

复制代码

UI页面使用

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

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

复制代码

扩展

如果需要适配小屏和分屏模式 页面布局能够根据设备状态主动调解，则需要动态获取窗口规避区的信息
可以参考【HarmonyOS】开启沉浸式（全屏）并动态获取窗口规避区的信息

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4