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

#### 问题现象

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

![](https://media:801782453019896383 "点击放大")  

#### 背景知识

* [getBarRect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-atomicservicebar#getbarrect15)：获取元服务menuBar相对窗口的布局信息。
* [元服务UX体验标准](https://developer.huawei.com/consumer/cn/doc/design-guides/ux-standard-overview-0000002019655177#section1036mcpsimp)：元服务胶囊在静态或第一屏界面显示，由框架统一提供，开发者不可以对其位置和样式进行自定义。  

#### 问题定位

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

#### 分析结论

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

#### 修改建议

* 采用Navigation布局，自动避让右上角胶囊（menuBar）区域，可参考[官网文档示例](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation)。
* 不采用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); // 延迟确保渲染完成
    }
  }
  ```

<br />