HarmonyOS Next顶部导航如何实现选中高亮显示？

Question

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

Answer 1

//使用Tabs组件，设置barPosition为BarPosition.Start控制导航条顶部展示。通过自定义布局实现导航背景高亮样式。
// src/main/ets/pages/BackgroundLightTab.ets
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  ForEach(this.tabArray.slice(0, 6),
    (item: TabItem) => {
      TabContent() {
        Row() {
          Text(item.name)
            .height(300)
            .fontSize(30)
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
      .backgroundColor(Color.White)
    }, (item: TabItem, index: number) => JSON.stringify(item) + index)
}
.width('100%')
//使用List组件实现可滑动效果。
// src/main/ets/pages/BackgroundLightTab.ets
List({ scroller: this.listScroller }) {
  ForEach(this.tabArray.slice(0, 6),
    (item: TabItem, index: number) => {
      this.tabBuilder(item.name, index);
    }, (item: TabItem, index: number) => JSON.stringify(item) + index)
}
//其中在tabBuilder组件中判断tab的索引值与激活tab索引是否相同，控制背景色的变化。
// src/main/ets/pages/BackgroundLightTab.ets
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  ForEach(this.tabArray.slice(0, 6),
    (item: TabItem) => {
      TabContent() {
        Row() {
          Text(item.name)
            .height(300)
            .fontSize(30)
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
      .backgroundColor(Color.White)
    }, (item: TabItem, index: number) => JSON.stringify(item) + index)
}
.width('100%')

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