HarmonyOS 鸿蒙Next Tabs里面tabBar样式，Tab的数量比较少，如何实现居左对齐

HarmonyOS 鸿蒙Next Tabs里面tabBar样式，Tab的数量比较少，如何实现居左对齐

【关键字】

Tabs组件 / TabBar少 / 居左对齐

【问题描述】

系统提供的Tabs组件，其中TabBar是否可以调整为居左布局？比如一个Tabs包含3页，“首页”，“发现”，“我的”，一般TabBar里面会包含3个可点击按钮，点击能切换页面，默认是居中的。希望这3个按钮居左对齐。

【解决方案】

对标swiftui，未提供居左的样式，可以通过Scroll和Row组件用来实现一个页签，在onclick事件中通过修改索引值和Tabs组件的索引联动，实现切换效果，同时将Tabs的barHeight置为0。

参考Demo：

@Entry
@Component
export struct Index{

private tabArray:string[] = [‘A’,‘B’]
@State focusIndex:number = 0
private controller: TabsController = new TabsController()
build() {
Column(){
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)
}
.height(‘100%’)
.width(‘100%’)
}}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

参考链接：

https://developer.huawei.com/consumer/cn/forum/topic/0202133093770806288?fid=0102683795438680754