元服务右上角胶囊位置遮挡页面元素

问题现象

应用元服务在设备上打开时，右上角胶囊（menuBar）与应用组件重叠遮挡。

背景知识

• getBarRect：获取元服务menuBar相对窗口的布局信息。
• 元服务UX体验标准：元服务胶囊在静态或第一屏界面显示，由框架统一提供，开发者不可以对其位置和样式进行自定义。

问题定位

1. 建议检查代码是否使用Navigation容器组件，Navigation一般情况下会自动避让系统UI。
2. 未使用Navigation容器组件情况下，建议检查代码中是否使用getBarRect获取menuBar相对窗口的布局信息，并对页面组件使用padding避让menuBar区域。

分析结论

应用未使用Navigation容器组件自动避让系统UI，也未使用getBarRect获取menuBar相对窗口的布局信息，手动使用padding避让元服务的右上角胶囊（menuBar）区域，导致遮挡了页面组件。

修改建议

• 采用Navigation布局，自动避让右上角胶囊（menuBar）区域，可参考官网文档示例。
• 不采用Navigation布局，可以使用getBarRect获取menuBar相对窗口的布局信息，并在顶部组件使用padding避让胶囊区域，参考如下代码：
  收起

  自动换行

  深色代码主题

  复制

  import { AtomicServiceBar } from '@kit.ArkUI';
  
  @Entry
  @Component
  struct BarRectDemo {
    private message: string = 'Hello World';
    @State rect: number = 0;
  
    build() {
      Column() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          });
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
      .alignItems(HorizontalAlign.End)
      .padding({ top: this.rect });
    }
  
    onPageShow() {
      setTimeout(() => {
        let uiContext: UIContext = this.getUIContext();
        let currentBar: Nullable<AtomicServiceBar> = uiContext.getAtomicServiceBar();
        if (currentBar !== undefined) {
          this.rect = currentBar.getBarRect().height;
        }
      }, 0); // 延迟确保渲染完成
    }
  }