HarmonyOS 从主页push到子页，但是TabBar还在？

Question

使用NavPathStack push到子页面，但是TabBar没隐藏。

Answer 1

需要把navigation放在最外层，navigaion包含tabs，就可以实现push到子页，TabBar隐藏。

参考示例：

@Component
struct Page01 {

  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Button('push Page01')
        .width('80%')
        .onClick(() => {
          this.pageInfos.pushPathByName('Page01', '');
        })
        .margin({top: 10, bottom: 10})
      Button('push Dialog01')
        .width('80%')
        .onClick(() => {
          this.pageInfos.pushPathByName('Dialog01', '');
        })
        .margin({top: 10, bottom: 10})
    }
    .title('Page01')
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Red)
  }
}

@Component
struct Dialog01 {

  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Stack() {
        Column()
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .opacity(0.1)
          .onClick(() => {
            this.pageInfos.pop();
          })
        // Add controls for business processing
        Column() {
          Text('Dialog01')
            .fontSize(30)
            .fontWeight(2)
          Button('push Page01')
            .width('80%')
            .onClick(() => {
              this.pageInfos.pushPathByName('Page01', '');
            })
            .margin({top: 10, bottom: 10})
          Button('push Dialog01')
            .width('80%')
            .onClick(() => {
              this.pageInfos.pushPathByName('Dialog01', '');
            })
            .margin({top: 10, bottom: 10})
          Button('pop')
            .width('80%')
            .onClick(() => {
              this.pageInfos.pop();
            })
            .margin({top: 10, bottom: 10})
        }
        .padding(10)
        .width(250)
        .backgroundColor(Color.White)
        .borderRadius(10)
      }
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Yellow)
  }
}

@Entry
@Component
struct Index {

  private tabBarItemList: string[] = ["首页", "门店", "工单", "资产", "我的"]

  @State private currentIndex: number = 0;

  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  buildNavigationTitle(item: string) {
    Column() {
      Text(item)
        .fontSize(16)
        .fontWeight(FontWeight.Regular)
        .fontColor(Color.Red)
    }
    .height("182px")
    .width("100%")
    .backgroundColor(Color.Orange)
    .align(Alignment.Center)
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  private buildTabBarItem(item: string, index: number) {
    Text(item)
      .fontSize(12)
      .fontWeight(FontWeight.Regular)
      .fontColor(index === this.currentIndex ? "#0A59F7" : "#7F7F7F")
  }

  @Builder
  PagesMap(name: string) {
    if (name == 'Page01') {
      Page01()
    } else if (name == 'Dialog01') {
      Dialog01()
    }
  }

  build() {
    Navigation(this.pageInfos) {

      Tabs({
        barPosition: BarPosition.End,
        index: this.currentIndex
      }) {
        ForEach(
          this.tabBarItemList,
          (item: string, index: number) => {
            TabContent() {
              Column() {
                this.buildNavigationTitle(item)
                Text(item).fontSize(30)

                Button('push Page01')
                  .width('80%')
                  .onClick(() => {
                    this.pageInfos.pushPathByName('Page01', '');
                  })
              }
              .height("100%")
              .width("100%")
              .backgroundColor(Color.Green)
              .justifyContent(FlexAlign.Start)
            }
            .width("100%")
            .height("100%")
            .backgroundColor(Color.Yellow)
            .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT],
              [SafeAreaEdge.TOP, SafeAreaEdge.START, SafeAreaEdge.END])
            .tabBar(this.buildTabBarItem(item, index))
          }
        )
      }
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .scrollable(false)
      .animationDuration(0)
      .barBackgroundColor("#F1F3F5")
      .divider({
        strokeWidth: 0.5,
      })
      .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT],
        [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END])
    }
    .navDestination(this.PagesMap)
    .hideTitleBar(true)
    .backgroundColor(Color.Red)
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT],
      [SafeAreaEdge.TOP, SafeAreaEdge.START, SafeAreaEdge.END])
  }
}