HarmonyOS tab标签如何左对齐,目前测试是局中显示,不知道如何调整?

Tab标签比较少,要求居左显示,如何设置,有没有API ?

HarmonyOS
2024-10-17 10:33:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

当前Tab组件不支持居左显示,可以自定义实现。参考demo如下:

@Entry  
@Component  
export default struct SegmentTabView {  
  private controller: TabsController = new TabsController()  
  @State tabs: string[] = ['新能源', "选车"];  
  @State currentIndex: number = 0;  
  @Builder  
  TabBuilder(tabName: string, index: number) {  
    Column() {  
      Text(tabName)  
        .fontColor(Color.Black)  
        .fontSize(this.currentIndex === index ? 19 : 16)  
        .fontWeight(this.currentIndex === index ? 800 : 400)  
        .margin({ left: 10, right: 10 })  
      Image($r('app.media.startIcon'))  
        .margin({ top: 5 })  
        .width(17)  
        .height(5)  
        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)  
    }.justifyContent(FlexAlign.Center).onClick(() => {  
      this.currentIndex = index  
      this.controller.changeIndex(index)  
    })  
  }  
  build() {  
    Column() { //自定义点击控件  
      Scroll() {  
        Row() {  
          ForEach(this.tabs, (tabName: string, index: number) => {  
            this.TabBuilder(tabName, index)  
          })  
        }.alignSelf(ItemAlign.Start)  
      }  
      .align(Alignment.Start)  
      .scrollable(ScrollDirection.Horizontal)  
      .scrollBar(BarState.Off)  
      .width('100%')  
      // 设置tabs高度为0隐藏  
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
        ForEach(this.tabs, (item: number, index: number) => {  
          TabContent() {  
            Text('我是页面 ' + item + " 的内容").fontSize(30)  
          }  
        })  
      }.barHeight(0)  
    }.width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-17 17:45:49
相关问题
Tab组件,无法对齐该怎么处理?
425浏览 • 1回复 待解决
HarmonyOS 顶部tabs如何设置对齐
437浏览 • 1回复 待解决
HarmonyOS Tabs组件的Tabs如何对齐
497浏览 • 1回复 待解决
不知道UIAbility的时候
214浏览 • 1回复 待解决
Tabs如何才能居显示
1004浏览 • 1回复 待解决