HarmonyOS Next中如何实现顶部导航双层嵌套效果？

Question

双层嵌套样式拥有两层导航，外层嵌套内层，与单层导航相比可以容纳更多页签
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//外层导航通过在TabContent组件设置tabBar属性，其中TabContent中嵌套List和子级Tabs。List组件嵌套subTabBuilder自定义组件实现内层导航。子级Tabs组件嵌套TabContent组件实现内容区。
// src/main/ets/pages/DoubleNestingTabOne.ets
@Builder
subTabBuilder(tabName: string | Resource, tabIndex: number) {
  Row() {
    Text(tabName)
      .fontSize(16)
      .fontColor(tabIndex === this.focusIndex ? '#0A59F7' : '#E6000000')
      .id(tabIndex.toString())
  }
  .justifyContent(FlexAlign.Center)
  .padding({ left: 12, right: 12 })
  .height(30)
  .onClick(() => {
    this.subController.changeIndex(tabIndex);
    this.focusIndex = tabIndex;
  })
}

// src/main/ets/pages/DoubleNestingTabOne.ets
TabContent() {
  Column() {
    Column() {
      Row() {
        List({ initialIndex: Constants.TAB_INDEX_ZERO, scroller: this.listScroller }) {
          ForEach(this.tabArray, (item: TabItem, index: number) => {
            this.subTabBuilder(item.name, index)
          }, (item: TabItem, index: number) => JSON.stringify(item) + index)
        }
        .listDirection(Axis.Horizontal)
        .height(30)
        .scrollBar(BarState.Off)
        .width('85%')
        .friction(0.6)

        Image($r('app.media.more'))
          .width(20)
          .height(15)
          .margin({ left: 16 })
      }
      .height(25)
      .width('100%')
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .padding({ left: 4 })

    // src/main/ets/pages/DoubleNestingTabOne.ets
    Tabs({ barPosition: BarPosition.Start, controller: this.subController }) {
      // ...
    }
    .barHeight(0)
    .animationDuration(Constants.ANIMATION_DURATION)
    .onAnimationStart((index: number, targetIndex: number) => {
      hilog.info(0x0000, 'index', index.toString());
      this.focusIndex = targetIndex;
      this.listScroller.scrollToIndex(targetIndex, true, ScrollAlign.CENTER);
    })
  }
}
.tabBar(this.tabBuilder(Constants.TAB_INDEX_ZERO, this.topTabData[Constants.TAB_INDEX_ZERO]))

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。