HarmonyOS tabs中的vertical\(true\)侧边栏条目怎么从顶部开始而不是居中？

Question

tabs中的vertical(true)侧边栏条目怎么从顶部开始而不是居中

tabs属性vertical(true)，barPosition: BarPosition.Start页签从顶部显示

Answer 1

请参考demo

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  controller = new TabsController() // 绑定在tabs组件导航上

  @Builder
  TabBuilder(index:number, name:string) {
    Text(name).padding(10).fontSize(17)
      .fontColor(this.currentIndex == index ? Color.Green : Color.Black)
      .onClick(() => this.controller.changeIndex(index)) // 点击左侧的按钮的时候,就会跳转到对应的TabContent内容页
  }

  build() {
    Row() {

      //横向布局中 左边占15%
      Column() {
        this.TabBuilder(0, '首页')
        this.TabBuilder(1, '分类')
      }.width('15%')

      Tabs({ controller: this.controller }) {

        //TabContent: 每个页签对应的内容
        TabContent() {
          Column() {
            Text('首页的内容').fontSize(30)
          }.width('85%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#30f0')
        }

        TabContent() {
          Text('分类内容').width('85%').height('100%').backgroundColor('#fa0')
        }
      }
      .barWidth(0)
      .vertical(true)
      .onChange(indexI => this.currentIndex = indexI) // 当tabs改变的时候,把新的 indexI 值给 currentIndex
    }.alignItems(VerticalAlign.Top)
  }
}