HarmonyOS Next顶部导航如何实现下划线样式？

Question

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

Answer 1

//使用Tabs组件，设置barPosition为BarPosition.Start控制导航条顶部展示。通过tabBar属性和Builder装饰器实现导航。
// entry/src/main/ets/pages/UnderlineTab.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)
}
//使用Divider组件实现下划线
// entry/src/main/ets/pages/UnderlineTab.ets
@Builder
tabBuilder(index: number, name: string | Resource) {
  Column() {
    Text(name)
      .fontColor(this.currentIndex === index ? '#0A59F7' : '#E6000000')
      .fontSize(16)
      .fontWeight(this.currentIndex === index ? FontWeight.Normal : FontWeight.Medium)
      .lineHeight(22)
      .margin({ top: 17, bottom: 7 })
    Divider()
      .width(48)
      .strokeWidth(Constants.STROKE_WIDTH)
      .color('#0A59F7')
      .opacity(this.currentIndex === index ? 1 : 0)
  }
}

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