HarmonyOS鸿蒙Next中tab设置为滚动导航栏的时候，start布局会失效，默认从中间开始布局

HarmonyOS鸿蒙Next中tab设置为滚动导航栏的时候，tabs就没法均分布局了，就会默认从中间开始布局。

期望是当设置滚动模式的时候，如果tabs栏目很少，仍然能够从开始的位置布局。

3 回复

参考下这个demo

@Entry
@Component
export default struct SegmentTabView {
  private controller: TabsController = new TabsController()
  @State tabs: string[] = ['新能源', "选车"];
  @State currentIndex: number = 0;
  @Builder
  TabBuilder(tabName: string, index: number) {
    Column() {
      Text(tabName)
        .fontColor(Color.Black)
        .fontSize(this.currentIndex === index ? 19 : 16)
        .fontWeight(this.currentIndex === index ? 800 : 400)
        .margin({ left: 10, right: 10 })
      Image($r('app.media.startIcon'))
        .margin({ top: 5 })
        .width(17)
        .height(5)
        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
    }.justifyContent(FlexAlign.Center).onClick(() => {
      this.currentIndex = index
      this.controller.changeIndex(index)
    })
  }
  build() {
    Column() {
      //自定义点击控件
      Scroll() {
        Row() {
          ForEach(this.tabs, (tabName: string, index: number) => {
            this.TabBuilder(tabName, index)
          })
        }.alignSelf(ItemAlign.Start)
      }
      .align(Alignment.Start)
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .width('100%')
      // 设置tabs高度为0隐藏
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabs, (item: number, index: number) => {
          TabContent() {
            Text('我是页面 ' + item + " 的内容").fontSize(30)
          }
        })
      }.barHeight(0)
    }.width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中tab设置为滚动导航栏的时候，start布局会失效，默认从中间开始布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，当Tab设置为滚动导航栏时，start布局可能会失效，导致默认从中间开始布局。这是因为滚动导航栏的设计逻辑优先考虑了居中显示，以确保用户能够快速定位到当前选中的Tab。start布局在这种情况下被覆盖，系统会自动调整布局以适配滚动导航栏的居中显示需求。

在HarmonyOS Next中，当使用Scrollable模式的Tabs时，默认行为确实会居中显示标签页。要解决这个问题，可以通过以下方式实现从起始位置布局：

  1. 使用TabBar的layoutMode属性设置为FIXED，即使设置了scrollable也能保持起始布局：
Tabs({ barPosition: BarPosition.Start }) {
  // tab内容
}
.barMode(BarMode.Scrollable)
.layoutMode(TabBarLayoutMode.Fixed)
  1. 或者通过自定义样式强制左对齐：
Tabs()
  .barMode(BarMode.Scrollable)
  .style({
    justifyContent: FlexAlign.Start
  })
  1. 如果标签数量较少，建议直接使用BarMode.Fixed模式，这样会自动均分布局。

注意：在HarmonyOS Next中，Tabs的默认行为会根据可用空间和标签数量自动调整，Scrollable模式主要是为处理大量标签设计的。

回到顶部