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

Question

tabs中的vertical(true)侧边栏条目怎么从顶部开始而不是从中间开始，并且保持tabs中的效果，比如:滚动，页签多的时候点击后自动排列到中间位置，回弹等

Answer 1

从顶部开始参考demo

@Extend(Text)
function tabBarStyle(isHigt: boolean) { .width("100%")
  .textAlign(TextAlign.Center)
  .backgroundColor(isHigt ? Color.Gray : Color.Transparent)
  .height(40)
}

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

  build() {
    Row() {
      Column() {
        Row() {
          Column({ space: 16 }) {
            Text("pink")
              .tabBarStyle(this.currentIndex == 0)
              .onClick(() => {
                this.currentIndex = 0
              })
            Text("yellow")
              .tabBarStyle(this.currentIndex == 1)
              .onClick(() => {
                this.currentIndex = 1
              })
            Text("blue")
              .tabBarStyle(this.currentIndex == 2)
              .onClick(() => {
                this.currentIndex = 2
              })
            Text("green")
              .tabBarStyle(this.currentIndex == 3)
              .onClick(() => {
                this.currentIndex = 3
              })
            Text("red")
              .tabBarStyle(this.currentIndex == 4)
              .onClick(() => {
                this.currentIndex = 4
              })
          }
          .justifyContent(FlexAlign.Start)
          .height("100%")
          .width("60")

          Tabs({ index: this.currentIndex }) {
            TabContent() {
              Column()
                .width('100%')
                .height('100%')
                .backgroundColor(Color.Pink)
            }

            TabContent() {
              Column()
                .width('100%')
                .height('100%')
                .backgroundColor(Color.Yellow)
            }

            TabContent() {
              Column()
                .width('100%').height('100%').backgroundColor(Color.Blue)
            }

            TabContent() {
              Column().width('100%').height('100%').backgroundColor(Color.Green)
            }

            TabContent() {
              Column().width('100%').height('100%').backgroundColor(Color.Red)
            }
          }.barWidth(0).vertical(true).scrollable(true).margin({ bottom: '12vp' })
        }
      }.width('100%')
    }.height('100%')
  }
}