鸿蒙开发tips-开发应用沉浸式效果

ArkTs鸿蒙开发

已于 2025-08-12 11:39:30 修改

阅读量229

点赞数 5

CC 4.0 BY-SA版权

分类专栏： # 鸿蒙开发tips 文章标签： harmonyos 华为鸿蒙 ArkTs

于 2025-08-11 22:15:15 首次发布

本文链接：https://blog.csdn.net/m0_59547823/article/details/150226258

鸿蒙开发tips 专栏收录该内容

2 篇文章

订阅专栏

华为官方开发文档链接：开发应用沉浸式效果-构建布局-组件布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

1.需要在onWindowStageCreate的windowStage.loadContent中加入以下代码

文件位置：src/main/ets/entryability/EntryAbility.ets

      //开发应用沉浸式效果
      let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
      // 1. 设置窗口全屏
      let isLayoutFullScreen = true;
      windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
        console.info('Succeeded in setting the window layout to full-screen mode.');
      }).catch((err: BusinessError) => {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
      });
      // 2. 获取布局避让遮挡的区域
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 此处以导航条避让为例
      let avoidArea = windowClass.getWindowAvoidArea(type);
      let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航区域的高度
      AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
      type = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
      avoidArea = windowClass.getWindowAvoidArea(type);
      let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
      AppStorage.setOrCreate('topRectHeight', topRectHeight);
      // 3. 注册监听函数，动态获取避让区域数据
      windowClass.on('avoidAreaChange', (data) => {
        if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
          let topRectHeight = data.area.topRect.height;
          AppStorage.setOrCreate('topRectHeight', topRectHeight);
        } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
          let bottomRectHeight = data.area.bottomRect.height;
          AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
        }
      });

参考如下截图:

2.在需要沉浸式的页面加入两步

2.1接收顶部和底部的距离

@StorageProp('bottomRectHeight')
bottomRectHeight: number = 0;
@StorageProp('topRectHeight')
topRectHeight: number = 0;

参考如下截图:

2.2应用该距离

    // top数值与状态栏区域高度保持一致；bottom数值与导航区域高度保持一致
    .padding({
      top: this.getUIContext().px2vp(this.topRectHeight),
      bottom: this.getUIContext().px2vp(this.bottomRectHeight)
    })

参考如下截图: