Tabs组件的tabBar,能否设置对齐方法?

在使用Tabs组件时,发现tabBar不能设置整体的对齐方式,只有默认居中。希望能提供tabbar的居左/居中/居右对齐方式。

HarmonyOS
2024-10-09 10:30:09
1131浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

1.目前tabBar只支持居中、均匀显示,可以使用自定义导航栏构建参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5

2.通过Scroll和Row组件用来实现一个页签,在onclick事件中通过修改索引值和Tabs组件的索引联动,实现切换效果,同时将Tabs的barHeight置为0

demo代码如下:

// 使用自定义页签组件  
Scroll() {  
  Row() {  
    ForEach(this.tabArray, (item: number, index: number) => {  
      Row({ space: 20 }) {  
        Text('页签' + item)  
          .fontWeight(index === this.focusIndex? FontWeight.Bold:FontWeight.Normal)  
      }  
      .padding({left:'10fp',right:'10fp'})  
      .onClick(() => {  
        this.controller.changeIndex(index)  
        this.focusIndex = index  
      })  
    })  
  }  
}  
.align(Alignment.Start)  
.scrollable(ScrollDirection.Horizontal)  
.scrollBar(BarState.Off)  
.width('100%')  
//tabs组件把tabbar隐藏  
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
  ForEach(this.tabArray, (item: number, index: number) => {  
    TabContent() {  
      Text('我是页面 ' + item + " 的内容")  
        .fontSize(30)  
    }  
  })  
}.barHeight(0)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
分享
微博
QQ
微信
回复
2024-10-09 17:51:06


相关问题
HarmonyOS Tabs组件Tabs如何左对齐
1245浏览 • 1回复 待解决
HarmonyOS Tabs组件对齐
680浏览 • 1回复 待解决
HarmonyOS Tabs bar 怎么设置对齐左边
1921浏览 • 1回复 待解决
HarmonyOS tabs不能设置对齐
533浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar宽度问题
1401浏览 • 1回复 待解决
HarmonyOS 顶部tabs如何设置对齐
1072浏览 • 1回复 待解决
HarmonyOS Tabs 组件无法隐藏 tabbar
1432浏览 • 1回复 待解决
HarmonyOS 如何设定tabs组件tabbar样式
1438浏览 • 1回复 待解决
如何在TabstabBar,添加其他组件
1527浏览 • 1回复 待解决
HarmonyOS Tabs组件TabBar不能完全贴合
854浏览 • 1回复 待解决
HarmonyOS tabs对齐问题
505浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar是否可以居左
841浏览 • 1回复 待解决
HarmonyOS 自定义tabbar对齐
656浏览 • 1回复 待解决
HarmonyOS Tabs如何左对齐?
530浏览 • 1回复 待解决