HarmonyOS tabs组件设置barOverlap为true时的问题？

Question

tabs设置页签位置为底部展示，设置barOverlap为true，叠加在TabContent之上，手机底部因为有那个横杠（Home指示条）会遮挡住tabs的文字内容，现在我这边解决tabs文字被Home指示条遮挡问题是设置tabs的padding({ bottom: this.naviIndicatorHeight })。

设置完padding后，padding的距离就没有叠加在TabContent之上，这个问题怎么解决呢？

这边的需求是：tabs的整个TabContent，沾满整个手机屏幕包括底部Home指示条。

Answer 1

请参考demo:

@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()
  @State gridMargin: number = 10
  @State gridGutter: number = 10
  @State sm: number = -2
  @State clickedContent: string = "";

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "2"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
      }
      .width('350vp')
      .animationDuration(300)
      .height('100%')
      .barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
      .backgroundColor(Color.Red)
      .barOverlap(true)
      .padding('30vp')
    }
    .width('100%')
    .height('100%')
    .margin({ top: 5 })

  }
}