HarmonyOS 鸿蒙Next tabs组件使用

目前tabbar只支持居中、均匀显示，您可以参考以下demo实现：

[@Entry](/user/Entry)

[@Component](/user/Component)

struct TabsPage {

  [@State](/user/State) tabArray: Array<string> = ['首页', '推荐', '发现', '我的']

  [@State](/user/State) focusIndex: number = 0

  private controller: TabsController = new TabsController()

  build() {

    Column() {

      //tab bar

      Row() {

        ForEach(this.tabArray, (item: string, index: number) => {

          Text(item)

            .fontSize(18)

            .fontColor(this.focusIndex === index ? '#007dff' : Color.Black)

            .height(60)

            .textAlign(TextAlign.Center)

            .onClick(() => {

              this.controller.changeIndex(index)

              this.focusIndex = index

            })

        })

      }

      .width('60%')

      .height(50)

      .backgroundColor(Color.Red)

      //Tab content

      Tabs({ controller: this.controller }) {

        ForEach(this.tabArray, (item: number, index: number) => {

          TabContent() {

            Text(item + '的内容')

              .width(500)

              .fontSize(30)

              .textAlign(TextAlign.Start)

          }

          .backgroundColor(Color.Blue)

        })

      }

      .barHeight(0)

      .animationDuration(100)

      .onChange((index: number) => {

        this.focusIndex = index

      })

    }

    .alignItems(HorizontalAlign.Start)

    .width('100%')

    .height('100%')

  }

}