#鸿蒙通关秘籍#如何在HarmonyOS Next中实现底部标签栏TabBar的动态标签样式？

在HarmonyOS Next中使用Tabs组件，以及配合自定义构建函数，可以实现动态标签样式。使用TabsController来控制页面切换，通过在Column中添加Image和Text组件，自定义每个标签的样式：例如：

@Component
struct TabBar {
  controller: TabsController = new TabsController()
  @State current: number = 0

  @Builder
  tabBuilder($$: BuilderParams) {
    Column() {
      Image(this.current === $$.index ? $$.selectIcon : $$.normalIcon).width(26)
      Text($$.label)
        .fontSize('12fp')
        .fontColor(this.current === $$.index ? '#62C9D0' : '#909090')
        .margin({ top: 3 })
    }
    .width('100%')
    .onClick(() => {
      this.current = $$.index
      this.controller.changeIndex(this.current)
    })
  }
}