HarmonyOS鸿蒙Next中如何使得Tabs中的tabBar数量较少时挨近显示，数量较多时均分显示

【问题现象】

应用中有的Tabs页面的数量是通过服务端返回的结果动态显示的，tabBar的数量较多时保持均分显示，但是数量较少时希望能够挨近显示，避免有大量的留白间距影响视觉体验。

通常均分显示如下所示：

挨近显示如下所示：

【背景知识】

组件：

Tabs组件：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

属性API：

barGridAlign：以栅格化方式设置tabBar的可见区域。可以参照响应式布局中的栅格布局动态调整tabBar的显示效果。

【定位思路】

1. 因为需要修改容器组件的排版样式，从组件的属性中寻找合适的API。用barGridAlign可以以栅格化方式设置tabBar的区域，可以调整动态tabBar的排版效果。
2. 如果没有合适的API，由于tabBar是添加到tabContent后才会显示，可以尝试把所有的tabBar删除，不用Tabs组件自带的tabBar，使用其他的容器组件来开发自定义的tabBar。

【解决方案】

方案一

设置Tabs的barGridAlign属性，根据栅格布局中对于Margin和Gutter的说明，调整两个属性的大小，以达到tabBar挨近或者均分的效果，示例代码片段如下所示：

@Entry
@Component
struct TabsView {
  // ......
  build() {
    Row() {
      Column() {
        Tabs({ controller: this.tabsController }) {
          ForEach(this.tabList, (item: string, index: number) => {
            TabContent() {
              Column()
                .width("100%")
                .height("100%")
                .backgroundColor(this.colorStrMap[item])
            }.tabBar(this.TabBarBuilder(item, index))
          }, (item: string) => item)
        }
        .width("100%")
        .height(300)
        .barGridAlign({ sm: 4, margin: this.tabList.length < 4 ? 80 : 0 })
        .onChange((index: number) => {
          this.currentIndex = index;
        })
      }
    }
  }
}

方案二

如不使用barGridAlign属性，可以把所有tabContent的tabBar删除，用其他容器组件例如Flex组件开发一个自定义的tabBar，这样就可以完全自定义样式了，示例代码片段如下所示：

@Entry
@Component
struct TabsView {
  // ......
  build() {
    Row() {
      Column() {
        Flex({
          justifyContent: this.tabList.length < 4 ? FlexAlign.Center : FlexAlign.SpaceAround,
          alignItems: ItemAlign.Center
        }) {
          ForEach(this.tabList, (item: string, index: number) => {
            this.TabBarBuilder(item, index);
          }, (item: string) => item)
        }
        .height(48)

        Tabs({ controller: this.tabsController }) {
          ForEach(this.tabList, (item: string, index: number) => {
            TabContent() {
              Column()
                .width("100%")
                .height("100%")
                .backgroundColor(this.colorStrMap[item])
            }
          }, (item: string) => item)
        }
        .barHeight(0) // tabBar高度设为0
        .width("100%")
        .height(300)
        .onChange((index: number) => {
          this.currentIndex = index;
        })
      }
    }
  }
}

【显示效果】

多个tabBar均分显示的效果如下所示：

少量tabBar挨近显示的效果如下所示：

【总结】

想要使得Tabs组件中的tabBar根据数量均分或者挨近显示，第一种办法是通过设置Tabs组件的barGridAlign属性调整。第二种方式是通过去掉Tabs自带的tabBar，用其他组件自行开发一个tabBar以达到样式自定义的目的。