HarmonyOS tabs组件首选定位tab问题？

Question

如何优雅设置tabs组件默认定位tabbar

tabs组件的tabbar, 不想默认是第0个，想自定义默认值。没有找到要设置的属性。

图中，不想默认定位到视频，可自己选择默认是哪个tabbar.

创建tabs的代码：

build(){
  Column() {
    Scroll() {
      Row(){
        ForEach(this.subTabDataArray,(item:WorkSubtabModel,index:number) =>
        {
          Row(){
            this.WorkSubTabCellView(item,index)
          }.onClick(()=> {
            this.currentIndex = index
            this.controller.changeIndex(index)
          })
        })
      }.margin({left:16,right:6,top:14,bottom:14})
    }.scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .width('100%')
    .align(Alignment.Start)
    Tabs({barPosition:BarPosition.Start,index:1,controller:this.controller}){
      ForEach(this.subTabDataArray,(subtabModel:WorkSubtabModel,index:number)=>{
        TabContent() {
          if(subtabModel.collectId == -1) {
            //视频
            WorkVideoPage({uid: this.uid,viewModel:this.viewModel})
          }else if(subtabModel.collectId == -2){
            //图片
            WorkPicturePage({uid: this.uid,viewModel:this.viewModel})
          }else if(subtabModel.collectId == -3) {
            //播单
            Column() {
              Text('播单')
            }.backgroundColor($r('app.color.c_fdd2d2'))
          }else if(subtabModel.collectId == -4) {
            //剧集
            Column() {
              Text('剧集')
            }.backgroundColor($r('app.color.c_5172FF'))
          }
          else if(subtabModel.collectId == -6) {
            //音频
            WorkAudioPage({uid: this.uid,viewModel:this.viewModel})
          }else {
            //单个作品集
            SingleWorkPage({uid: this.uid, viewModel: new SingleWorkViewModel(subtabModel,this.uid)})
          }
        }
      })
    }.vertical(false)
    .scrollable(false)
    .barHeight(0)
    .height('100%')
    .width('100%')
  }
}

Answer 1

您可以使用index属性来设置默认展示的页面，参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5\#接口

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 2
  private controller: TabsController = new TabsController()

  @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('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, 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)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}