#鸿蒙通关秘籍#在HarmonyOS NEXT中如何实现自定义Tabs导航栏？

自定义Tabs导航栏时，可以通过tabBar参数传递一个CustomBuilder自定义样式，以下是实现方法：

1. 通过@Builder定义自定义样式：

@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 ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
}

2. 引用自定义样式到TabContent中：

TabContent() {
  Column(){
    Text('我的内容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))