#鸿蒙通关秘籍#在HarmonyOS NEXT中如何配置TabBar并自定义每个Tab的样式？

在HarmonyOS NEXT中配置TabBar并自定义每个Tab的样式，使用一个构建方法TabBuilder来动态设置每个Tab的图标和文字颜色。通过不同的状态选择不同的图标，点击后更新currentIndex和Tab的状态：

@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
  .onClick(() => {
    this.currentIndex = targetIndex
    this.controller.changeIndex(this.currentIndex)
  })
}

通过该构建器，依据当前选中状态调整图标和文字颜色，将点击事件绑在Column上以改变currentIndex，从而实现切换。