HarmonyOS鸿蒙Next中onWindowStageCreate入口里按照文档设置了沉浸式，使用窗口全屏布局方案，但是想让页面布局避让状态栏和导航栏

HarmonyOS鸿蒙Next中onWindowStageCreate入口里按照文档设置了沉浸式，使用窗口全屏布局方案，但是想让页面布局避让状态栏和导航栏

文档写的不全第四步设置完 padding 后为什么文档里的示例状态栏 导航条显示的透明的并且避让了，我的是白色的，完全按照文档来的实在不知道哪里出了问题，求助大佬知道一下

取消掉 padding 后就会和状态栏重叠，我想要的既避让又延伸到 状态栏 和 导航条

之前一直用的 组件安全区方案 但是设置了之后每个组件都要设置一遍 这个太冗余了，比如下面这个 swiper，每个都要设置才嫩实现沉浸式

请问有没有一个完整的最佳实践 demo 呢

import { Route } from "@hzw/zrouter";
import { RouterConstants } from "../common/utils/RouterConst";

@Route({ name: RouterConstants.HOME_PAGE })
@ComponentV2
export struct HomePage {
  @Event onFullScreen(): void = () => {}; //正确用法

  build() {
    Column() {
      Swiper() {
        Text('0')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

        Text('1')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        Text('2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
          // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      }
      .loop(true)
      .indicator(false) // 隐藏指示点
      // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
    .width('100%')

    .height('100%')
    // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .gesture(
      GestureGroup(GestureMode.Exclusive, // 互斥模式：只触发一种手势
        LongPressGesture() // 添加长按手势，但不做任何操作
          .onAction(() => {
            // 空实现，只是为了捕获长按避免触发点击
            console.info('触发长按 - 但不执行点击操作');
          }),
        TapGesture({ count: 1 }) // 点击手势
          .onAction(() => {
            if (this.onFullScreen) {
              this.onFullScreen();
            }
          }),
        PanGesture() // 滑动手势
          .onActionStart((event: GestureEvent) => {

          })
          .onActionUpdate((event: GestureEvent) => {

          })
          .onActionEnd(() => {

          })
      )
    )
  }
}

更多关于HarmonyOS鸿蒙Next中onWindowStageCreate入口里按照文档设置了沉浸式，使用窗口全屏布局方案，但是想让页面布局避让状态栏和导航栏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

padding必须放在背景色的绿色的组件里，navigation和NavDdestiantion背景色默认是白色，

更多关于HarmonyOS鸿蒙Next中onWindowStageCreate入口里按照文档设置了沉浸式，使用窗口全屏布局方案，但是想让页面布局避让状态栏和导航栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，整明白了谢谢大佬，

在HarmonyOS鸿蒙Next中，onWindowStageCreate入口设置沉浸式后，若需页面布局避让状态栏和导航栏，可使用Window的getWindowAvoidArea方法获取避让区域。通过setWindowLayout调整布局，确保内容不覆盖状态栏和导航栏。具体实现可参考Window类相关API。

在HarmonyOS Next中实现沉浸式布局并避让状态栏/导航栏的正确做法是：

  1. 确保在onWindowStageCreate中正确设置窗口标志：
windowClass.setWindowSystemBarEnable(['status', 'navigation'])
windowClass.setWindowLayoutFullScreen(true)
windowClass.setWindowSystemBarProperties({
  statusBarContentColor: '#000000',
  navigationBarContentColor: '#000000'
})
  1. 对于页面布局，推荐使用全局安全区域方案替代组件级设置：
Column() {
  // 页面内容
}
.width('100%')
.height('100%')
.padding({ 
  top: $r('app.float.safe_area_top'),
  bottom: $r('app.float.safe_area_bottom') 
})
.backgroundColor(Color.White)
  1. 在资源文件中定义安全区域值：
{
  "name": "safe_area_top",
  "value": "28vp"
},
{
  "name": "safe_area_bottom", 
  "value": "48vp"
}

常见问题排查：

  1. 白色背景问题：检查是否在windowStageCreate之后又调用了setWindowSystemBarEnable
  2. 避让失效：确认padding值是否正确应用，建议使用资源引用而非硬编码
  3. 组件重叠：确保根容器设置了padding而非单个组件

对于Swiper等全屏组件，只需在父容器设置安全区域即可，无需每个子组件单独设置。

回到顶部