HarmonyOS鸿蒙Next中Tab组件内Navigation跳转，TabBar导航栏隐藏失败如何解决

【问题现象】

在“我的”页面点击“跳转设置页面”按钮跳转到设置页面，底部的TabBar导航栏仍然存在。

主页面有“首页”、“我的”两个Tab页面，需要把各个Tab页面的Navigation导航隔离，分别控制各自的路由，部分代码如下：

// 主页面部分代码
Tabs({
  barPosition: BarPosition.End,
}) {
  TabContent() {
    Text('首页')
  }
  .tabBar(this.BottomNavigation('首页'))
  TabContent() {
    MinePage();
  }
  .tabBar(this.BottomNavigation('我的'))
}

// 我的页面部分代码
Navigation(this.minePathStack) {
  Row() {
    Button('跳转设置页面').onClick(() => {
      this.minePathStack.pushPathByName('settings', null)
    })
  }.height('100%')
}.navDestination(this.routerMap)

【背景知识】

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

【定位思路】

方案1： 在Tab组件外侧包一层Navigation组件，可以隐藏，但是无法将每个Tab页面的Navigation路由隔离，该方案不适用当前问题。

方案2： 可以使用自定义导航栏，根据页面index去切换不同的导航栏，或者隐藏导航栏，思路如下：

@Builder
导航栏1() { ... }
@Builder
导航栏2() { ... }
// Index中先隐藏Tab组件的导航栏
tab() { ... }.barHeight(0)
// 显示自定义导航栏
Row() {
    if (...) {
        导航栏1()
    } else {
        导航栏2()
    }
}

【解决方案】

通过上面思路定位，使用方案2来处理，具体实现可参考如下：

自定义导航栏A

@Component
struct A {
  build() {
    Text("Tab Bar A")
  }
}

自定义导航栏B

@Component
struct B {
  build() {
    Text("Tab Bar B")
  }
}

点击“Navigation跳转”，底部的自定义导航栏就会隐藏，点击“显示”底部的自定义导航栏就会显示。

@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 0
  @State isShowA: boolean = true
  @State isShowB: boolean = true

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Row(){
            Button("Navigation 跳转").onClick(()=>{
              this.isShowA = this.isShowB = false
            })
            Button("显示").onClick(()=>{
              this.isShowA = this.isShowB = true
            })
          }
        }
      }
      .barHeight(0)
      Row() {
        if (this.isShowA) { A() }
        if (this.isShowB) { B() }
      }.backgroundColor("# ec3")
    }.width('100%')
  }
}

效果图如下：

【总结】

Tab组件配合Navigation组件实现页面跳转，页面跳转时需要将TabBar导航栏隐藏，如果每个Tab页面的Navigation路由不需要分别控制，可以在Tab组件外侧包一层Navigation组件实现，如果Tab页面需要分别控制路由，可以通过上述自定义导航栏实现。