HarmonyOS 鸿蒙Next中遮挡

HarmonyOS 鸿蒙Next中遮挡 开启深色模式，如何解决顶部显示内容被状态栏遮挡的问题

4 回复

使用过程中开启深色模式，内容被状态栏遮挡是statusBarHeight获取的高度产生的影响。

window.getLastWindow获取的statusBarHeight高度是瞬时的，需要在onWindowStageCreate方法里使用windowClass.on监听窗口的变化，这样就能实时的获取statusBarHeight的高度。

代码示例如下：

// entryability.ets:
onWindowStageCreate(windowStage: window.WindowStage): void {

  let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
  try {
  windowClass.on('avoidAreaChange', (data) => {
  console.info('Succeeded in enabling the listener for system avoid area changes. type:' +
  JSON.stringify(data.type) + ', area: ' + JSON.stringify(data.area));
  let area = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
  let statusBarHeight = 0
  // 注意：返回的是px值，如果要用vp值需要转换
  statusBarHeight = px2vp(area.topRect.height);
  PersistentStorage.persistProp('test', statusBarHeight);
});
} catch (exception) {
  console.error(`Failed to enable the listener for system avoid area changes. Cause code: ${exception.code}, message: ${exception.message}`);
}
windowStage.loadContent('pages/Index', (err) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}

// Demo.ets:
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Demo {
  @State message: string = 'Hello World';
  @StorageLink('test') statusBarHeight:number = 0

  build() {
    Column() {
      Row(){
        Text(this.message)
          .id('DemoHelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .padding({top: this.statusBarHeight})
      .width('100%')
      .backgroundColor(Color.Pink)
    }
    .height('100%')
    .width('100%')
  }
}

【背景知识】

window.getLastWindow获取的statusBarHeight高度是瞬时的。

更多关于HarmonyOS 鸿蒙Next中遮挡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


什么样式？来个截图看看

在HarmonyOS Next中，遮挡问题通常涉及UI组件层级管理。鸿蒙通过Z序控制组件覆盖关系，可使用zIndex属性调整元素堆叠顺序。布局容器默认按添加顺序排列，后添加的组件会覆盖先添加的。若出现意外遮挡，检查组件层级结构，确认是否设置了正确的Z序值。全屏场景需注意系统UI（如状态栏）的遮挡处理，可通过安全区域适配避免。

在HarmonyOS Next中，若深色模式下顶部内容被状态栏遮挡，可通过以下方式解决：

  1. 使用fitWindow属性
    在布局XML中为根布局添加：

    android:fitsSystemWindows="true"

    确保内容避开系统窗口区域。

  2. 调整状态栏样式
    在代码中设置状态栏透明并适配深色模式：

    getWindow().setStatusBarColor(Color.TRANSPARENT);
getWindow().getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
);

    若状态栏文字需反色，可调整SYSTEM_UI_FLAG_LIGHT_STATUS_BAR。

  3. 使用安全区域组件
    通过SafeArea组件自动避开刘海屏或状态栏区域：

    SafeArea({
  top: true
}) {
  // 主要内容
}

  4. 检查主题配置
    确保应用主题未强制全屏，避免与状态栏冲突。例如在themes.xml中禁用全屏属性：

    <item name="android:windowFullscreen">false</item>

通过以上方法可有效适配深色模式下的布局显示，确保内容不被状态栏遮挡。

回到顶部