TabContent

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  build() {
    Tabs({ barPosition: BarPosition.Start, controller:this.controller }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }.tabBar(this.TabBuilder(0, 'green'))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }.tabBar(this.TabBuilder(1, 'blue'))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#FFBF00')
      }.tabBar(this.TabBuilder(2, 'yellow'))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#E67C92')
      }.tabBar(this.TabBuilder(3, 'pink'))
    }
    .vertical(false) //Tabs 方向 false:横向 true:纵向
    .barMode(BarMode.Fixed) //布局模式 Fixed:平均分配页签栏宽度或长度
    .barWidth(360) //设置页签栏宽度
    .barHeight(56) //设置页签栏高度
    .animationDuration(400) //设置切换页签的滑动动画时长
    .onChange((index: number) => {
      this.currentIndex = index
    })
    .width(360)
    .height(296)
    .margin({ top: 52 })
    .backgroundColor('#F1F3F5')
  }
  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ?
        this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#6666ff')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }
}