HarmonyOS 鸿蒙Next Tabs组件的tabBar为什么只能居中显示

一种可以取巧的方式是定义六个tab，后三个进行隐藏处理：

1、页签用空字符串；

2、空白页签的点击响应切换到 N-3 页签，见 3；

3、Tabs的 onChange() 事件中对索引进行 index % 3 操作后调用 controller.changeIndex(idx) 切换回前3个页签，可绕开滑动换页。

总之，把后三个当成前三个的影子；其它是否有影响未知，也未真实测试，只是思路供借鉴。

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Application_7 {
  [@State](/user/State) currentIndex: number = 0
  controller = new TabsController()
@Builder tab(index: number, name: string) {
Row() {
Text(name)
.fontColor(this.currentIndex === index ? Color.Green : Color.Black)
.onClick(() => {
this.controller.changeIndex(index)
})
}.width(50).height(‘100%’).backgroundColor(’#c0c0c0’)
}
@State num: number[] = []
aboutToAppear() {
for (let i = 0; i < 100; i++) {
this.num[i] = i
}
}
build() {
Column() {
Row() {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tab(<span class="hljs-number"><span class="hljs-number">0</span></span>, <span class="hljs-string"><span class="hljs-string">"首页"</span></span>)
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tab(<span class="hljs-number"><span class="hljs-number">1</span></span>, <span class="hljs-string"><span class="hljs-string">"发现"</span></span>)
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tab(<span class="hljs-number"><span class="hljs-number">2</span></span>, <span class="hljs-string"><span class="hljs-string">"我的"</span></span>)

  }.height(<span class="hljs-string"><span class="hljs-string">'10%'</span></span>).width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#6a6da9'</span></span>)

    Tabs({ controller: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.controller, barPosition: BarPosition.Start }) {
      TabContent() {

        List() {
          ListItem() {
            Text(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.num.toString()).width(<span class="hljs-number"><span class="hljs-number">50</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#c0c0c0'</span></span>)
          }

        }

      }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#c0c0c0'</span></span>)

      TabContent() {
        Column() {
          Text(<span class="hljs-string"><span class="hljs-string">'222'</span></span>)
        }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center)

      }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#c0c0c0'</span></span>)

      TabContent() {
        Text(<span class="hljs-string"><span class="hljs-string">'333'</span></span>)
      }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#c0c0c0'</span></span>)
    }
    .vertical(<span class="hljs-literal"><span class="hljs-literal">false</span></span>) <span class="hljs-comment"><span class="hljs-comment">// tabBar 放在顶部</span></span>
    .barWidth(<span class="hljs-number"><span class="hljs-number">0</span></span>) <span class="hljs-comment"><span class="hljs-comment">// 把tabBar的宽高设置为0,隐藏 tabBar</span></span>
    .barHeight(<span class="hljs-number"><span class="hljs-number">0</span></span>)
    .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .height(<span class="hljs-string"><span class="hljs-string">'90%'</span></span>)
    .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f58220'</span></span>)
    .scrollable(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
    .barMode(BarMode.Fixed)
    .onChange(index =&gt; <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentIndex = index)

}.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

可以试试这个!我把tabBar隐藏了!原来那个有点小问题,昨天没注意到!