本文介紹了在HarmonyOS應用開發過程中，遇到了Navigation嵌套Tabs導致Tabs佈局異常的問題，查明瞭問題原因並給出瞭解決方案。

問題背景

在某個應用裏面，需要使用HarmonyOS的Navigation和Tabs，其中，Navigation嵌套了Tabs，代碼如下：

build() {
  Navigation(this.pageInfos) {

    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
      }
      .tabBar(this.tabBuilder('首頁', 0, $r('app.media.home'), $r('app.media.home')))

      TabContent() {
      }
      .tabBar(this.tabBuilder('拍照', 1, $r('app.media.camera'), $r('app.media.camera')))
    }
    .width('100%')
    .height('100%')

  }.mode(NavigationMode.Stack)
  .width('100%')
  .height('100%')

}

但可以看到 Tabs 具體底部有非常大的一段空間。如下圖所示。

如果將Navigation去除，Tabs正常顯示。如下圖所示。

問題原因

Tabs跟Navigation底部工具欄衝突。因為Navigation並未配置toolbarConfiguration，因此並未底部工具欄，但空間還是被底部工具欄佔據了。

解決方案

方案1

將Navigation底部工具欄禁用就好。代碼如下：

build() {
  Navigation(this.pageInfos) {

    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
      }
      .tabBar(this.tabBuilder('首頁', 0, $r('app.media.home'), $r('app.media.home')))

      TabContent() {
      }
      .tabBar(this.tabBuilder('拍照', 1, $r('app.media.camera'), $r('app.media.camera')))
    }
    .width('100%')
    .height('100%')

  }.mode(NavigationMode.Stack)
  .width('100%')
  .height('100%')
  // 禁用底部工具欄
  .hideToolBar(true)

}

方案2

更好的方案是直接使用Navigation底部工具欄來替換掉Tabs，本質上Tabs和Navigation底部工具欄功能上有重疊。示例代碼如下：

build() {
  Navigation(this.pageInfos) {
 

  }.mode(NavigationMode.Stack)
  .width('100%')
  .height('100%')
  // 禁用底部工具欄
  // .hideToolBar(true)
  .toolbarConfiguration([
    {
      value: '首頁',
      icon: $r("app.media.home")
    },
    {
      value: '拍照',
      icon: $r("app.media.camera")
    }
  ])
}

效果如下：

更多參考

加入鴻蒙生態，共建萬物互聯。以下是鴻蒙應用開發常用教程。

• 本文同步至：https://waylau.com/nested-tabs-in-harmonyos-navigation/
• 《跟老衞學HarmonyOS開發》開源免費教程， https://github.com/waylau/harmonyos-tutorial
• 《跟老衞學AI大模型開發》開源免費教程， https://github.com/waylau/ai-large-model-tutorial/
• 《跟老衞學倉頡編程語言開發》開源免費教程， https://github.com/waylau/cangjie-programming-language-tutorial
• 《鴻蒙HarmonyOS手機應用開發實戰》（清華大學出版社）
• 《鴻蒙HarmonyOS應用開發入門》（清華大學出版社）
• “鴻蒙零基礎快速實戰-仿抖音App開發（ArkTS版）”（https://coding.imooc.com/class/843.html）
• 《鴻蒙HarmonyOS應用開發從入門到精通（第2版）》（北京大學出版社)
• 《鴻蒙之光HarmonyOS NEXT原生應用開發入門》（清華大學出版社)
• “HarmonyOS NEXT+AI大模型打造智能助手APP(倉頡版)”（https://coding.imooc.com/class/927.html）
• “HarmonyOS 6 AI應用開發”(https://edu.51cto.com/course/39601.html)