HarmonyOS鸿蒙Next中Tabs设置水平滚动显示，tabItem较少时怎么居左显示（默认居中显示的）

HarmonyOS鸿蒙Next中Tabs设置水平滚动显示，tabItem较少时怎么居左显示（默认居中显示的） Tabs设置.scrollable(true) .barMode(BarMode.Scrollable)，tabItem较少时怎么居左显示（默认居中显示的）

3 回复

可以结合下面的代码和Tabs常用方式自行判断组合。通过一个状态判断tableItem的数量，对于tableItem较少时，采用下面代码中的方式；对于tableItem较多时，采用Tabs常用方式。

@Entry
@Component
struct Index {
  @State tabArray: Array<number> = [0,1,2]
  @State focusIndex: number = 0
  private controller: TabsController = new TabsController()
  scrollerForList: Scroller = new Scroller()

  // 单独的页签
  @Builder Tab(tabName: string, tabItem: number, tabIndex: number) {
    Column({ space: 20 }) {
      Text(tabName).fontSize(18)
    }
    .width(100)
    .height(30)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
    .backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
  }

  build() {
    Column() {
      // 页签
      Row() {
        List({ scroller: this.scrollerForList }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            ListItem() {
              this.Tab("页" + item, item, index)
            }
          })
        }
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)
      }
      .height(30)
      .justifyContent(FlexAlign.Start)
      .width('100%')
      .backgroundColor("#ffb7b7b7")

      //tabs
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabArray, (item: number, index: number) => {
          TabContent() {
            Text('我是页面 ' + item + " 的内容")
              .height(300)
              .width('100%')
              .fontSize(30)
          }
          .backgroundColor(Color.Blue)
        })
      }
      .barMode(BarMode.Scrollable)
      .barHeight(0)
      .animationDuration(100)
      .onChange((index: number) => {
        this.focusIndex = index
        // 使用scroller实现上下联动，具体滚动效果根据业务需要自行设计，以下为滚动示例
        this.scrollerForList.scrollToIndex(index,true)
      })
    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs设置水平滚动显示，tabItem较少时怎么居左显示（默认居中显示的）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Tabs组件的默认行为是将tabItem居中显示。如果希望tabItem较少时居左显示，可以通过自定义Tabs的布局样式来实现。具体步骤如下：

  1. 使用Tabs组件时，通过layoutDirection属性设置布局方向为从左到右。例如：

    <Tabs layoutDirection="left">
    <TabItem ... />
    <TabItem ... />
</Tabs>

  2. 如果需要更精确的控制，可以通过自定义样式或布局文件，调整Tabs的justifyContent属性为FlexAlign.Start，使其居左显示。例如：

    <Tabs style="justifyContent: FlexAlign.Start;">
    <TabItem ... />
    <TabItem ... />
</Tabs>

  3. 如果以上方法不能满足需求，可以通过自定义组件或使用Stack、Row等布局组件，手动控制Tabs的布局位置，使其居左显示。

通过这些方法，可以在Tabs组件中实现tabItem较少时居左显示的效果。

在HarmonyOS鸿蒙Next中，若要让Tabs组件在tabItem较少时居左显示，可以通过自定义样式实现。使用justifyContent属性设置为FlexAlign.Start，使内容靠左对齐。代码示例如下：

Tabs({ barPosition: BarPosition.Start }) {
  // Tab items here
}
.justifyContent(FlexAlign.Start)

这样，Tabs的内容将在tabItem较少时靠左显示，而不是默认的居中显示。

回到顶部