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

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

HarmonyOS
2024-10-09 10:30:09
浏览
收藏 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)
分享
微博
QQ
微信
回复
2024-10-09 17:51:06
相关问题
HarmonyOS Tabs组件Tabs如何左对齐
213浏览 • 1回复 待解决
HarmonyOS Tabs bar 怎么设置对齐左边
723浏览 • 1回复 待解决
HarmonyOS 顶部tabs如何设置对齐
296浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar宽度问题
450浏览 • 1回复 待解决
HarmonyOS 如何设定tabs组件tabbar样式
446浏览 • 1回复 待解决
如何在TabstabBar,添加其他组件
444浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居左
393浏览 • 1回复 待解决
关于Tabs里面tabBar样式问题
248浏览 • 2回复 待解决
Input组件是否支持设置文本居中对齐
1858浏览 • 1回复 待解决
HarmonyOS Tabs组件bar背景设置问题
241浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
263浏览 • 1回复 待解决