鸿蒙tab切换栏

import { BSText } from '../../../components/BSUI'
import { AppBarWidget } from './AppBarWidget'


@Entry
@Component
struct TabPage {
  @State currentIndex: number = 0

  @Builder TabBuilder(index: number, title: string,) {
    Column() {
      Divider().height(5).color(Color.Transparent).width(20)
      BSText({title:title.toString(),fontColor:this.currentIndex === index ?  '#F33F3F':'#333333',fontSize:15})
      Divider().color(this.currentIndex === index ?  Color.Red:Color.Transparent).width(30)
    }.justifyContent(FlexAlign.SpaceBetween).layoutWeight(1).width(80)
  }

  build() {
    Column(){
      AppBarWidget({title:'TabPage'})
      Column() {
        //布局区别：BarPosition.Start、vertical(false)
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(this.TabBuilder(0,'全部'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(this.TabBuilder(1,'待发货'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(this.TabBuilder(2,'已发货'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(this.TabBuilder(3,'已收货'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(this.TabBuilder(3,'确认'))

        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Scrollable)
        .onChange((index: number) => {
          this.currentIndex = index;
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').layoutWeight(1)
    }
  }
}