HarmonyOS Next顶部导航如何实现选中文字放大样式？

Question

HarmonyOS Next顶部导航如何实现选中文字放大样式？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//使用Tabs组件，设置barPosition为BarPosition.Start。通过tabBar属性和Builder装饰器实现导航。
// entry/src/main/ets/pages/WordTab.ets
Tabs({ barPosition: BarPosition.Start }) {
  ForEach(this.tabArray.slice(0, 4), (item: TabItem) => {
    TabContent() {
      Row() {
        Text(item.name)
          .height(300)
          .fontSize(30)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .height('100%')
    }.tabBar(this.tabBuilder(item.id, item.name))
  }, (item: TabItem, index: number) => JSON.stringify(item) + index)
}
//其中在tabBuilder组件判断tab的索引值与选中tab索引是否相同，控制字体大小的变化。
// entry/src/main/ets/pages/WordTab.ets
@Builder
tabBuilder(index: number, name: string | Resource) {
  Column() {
    Text(name)
      .fontColor(Color.Black)
      .fontSize(this.currentIndex === index ? 20 : 16)
      .fontWeight(this.currentIndex === index ? 600 : FontWeight.Normal)
      .lineHeight(22)
      .id(index.toString())
  }
}

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