HarmonyOS TabContent().tabBar 只能居中吗？

TabContent().tabBar 希望可以调整位置，目前似乎只能居中。

HarmonyOS

superinsect

2024-09-27 10:52:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

vertical为true时，tabbar的高度默认为实际内容的高度，需要设置barHeight为合适值。

可参考代码：

@State tabArray: Array<number> = [0, 1]  
@State focusIndex: number = 0  
private controller: TabsController = new TabsController()  
  
// 单独的页签  
@Builder  
Tab(tabName: string, tabItem: number, tabIndex: number) {  
  Column({ space: 20 }) {  
    Text(tabName).fontSize(18).textAlign(TextAlign.Center).height(50)  
  }  
  .width('100%')  
  .height(50)  
  .borderRadius(10)  
  .onClick(() => {  
    this.controller.changeIndex(tabIndex)  
    this.focusIndex = tabIndex  
  })  
  .backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")  
}  
Row() {  
  // 页签  
  Column({ space: 7 }) {  
    Scroll() {  
      Column() {  
        ForEach(this.tabArray, (item: number, index: number) => {  
          this.Tab("页" + item, item, index)  
        })  
      }.justifyContent(FlexAlign.Start)  
    }  
    .align(Alignment.Start)  
    .scrollable(ScrollDirection.Horizontal)  
    .scrollBar(BarState.Off)  
    .width('80%')  
    .backgroundColor("#ffb7b7b7")  
  }  
  .width('20%')  
  .backgroundColor("#ffb7b7b7").height('100%')  
  
  //tabs  
  Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
    ForEach(this.tabArray, (item: number, index: number) => {  
      TabContent() {  
        Text("我是具体页面内容").height(50).width('100%').fontSize(30)  
          .textAlign(TextAlign.Center)  
      }  
    })  
  }  
  .backgroundColor(Color.Blue)  
  .width('80%')  
  .vertical(false)  
  .scrollable(true)  
  .animationDuration(100)  
  .onChange((index: number) => {  
    console.log('foo change')  
    this.focusIndex = index  
  })  
  .height('100%')  
}.width('100%').height('100%')  
  
}