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

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


HarmonyOS
2024-09-27 10:52:14
浏览
收藏 0
回答 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%')  
  
}
分享
微博
QQ
微信
回复
2024-09-27 17:49:07
相关问题
如何设置TabBarTabContent的分割线样式
2321浏览 • 1回复 待解决
HarmonyOS TabContent
469浏览 • 1回复 待解决
服务卡片只能基于JAVA开发
3457浏览 • 1回复 待解决
HarmonyOS tabbar悬停效果
498浏览 • 1回复 待解决
API9只能用真机调试?
879浏览 • 1回复 待解决
HarmonyOS Text设置align不居中
550浏览 • 1回复 待解决