HarmonyOS 鸿蒙Next tab的使用问题

[@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() {
    Stack() {
      //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
      })

      //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
            })
        })
      }
      .position({left:0,bottom:50})
      .width('100%')
      .height(50)
      .backgroundColor(Color.Red)
    }
    .width('100%')
    .height('100%')
  }
}