ArkUI Tabs：多页内容别都堆在一个页面里

今天我们用 Tabs 把同一层级的内容拆成几页，让页面不再从头长到尾。

Tabs 的思路很直接：Tabs 管整体，TabContent 管每一页，tabBar 管标签文字。我们先用组件自己的切换能力，不额外记录当前索引，避免一上来就把主题带到状态管理。

第一块是顶部页签。barPosition: BarPosition.Start 放在上面，barMode(BarMode.Fixed) 让几个标签均分宽度。参数少、标签少时，这种写法最稳。

第二块是底部页签。把 barPosition 改成 End，内容会先被看到，标签放到下面。它适合内容优先的页面，不是所有场景都该用，但作为布局能力值得认识。

第三块是可滚动标签。标签多了就别硬挤，用 BarMode.Scrollable 和 scrollable(true) 让标签区自己处理横向空间。

你做过哪种最容易变长的页面？详情页、设置页，还是各种“说明 + 参数 + 示例”的教程页？

完整代码

class TabPanelInfo {
  title: string
  desc: string
  color: string

  constructor(title: string, desc: string, color: string) {
    this.title = title
    this.desc = desc
    this.color = color
  }
}

@Entry
@Component
struct ArkUITabsDemo {
  private panels: TabPanelInfo[] = [
    new TabPanelInfo('概览', '把同一类内容放到一个页签里，用户不用在长页面里反复找。', '#2563EB'),
    new TabPanelInfo('参数', '参数多时可以单独成页，主内容会更干净。', '#0F766E'),
    new TabPanelInfo('示例', '示例页签适合放短代码、截图或操作步骤。', '#C2410C'),
    new TabPanelInfo('常见问题', '问题列表不必挤在正文后面，切出去看更轻。', '#7C3AED'),
    new TabPanelInfo('更新记录', '内容有版本变化时，用页签隔开更好扫读。', '#B45309')
  ]

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  tabPanel(item: TabPanelInfo) {
    Column({ space: 10 }) {
      Text(item.title)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .fontColor(item.color)
      Text(item.desc)
        .fontSize(14)
        .fontColor('#4B5563')
        .lineHeight(22)
      Text('这里先只看 Tabs 的结构：TabContent 负责内容，tabBar 负责标签。')
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .borderRadius(12)
    .backgroundColor('#F8FAFC')
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI Tabs')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('多页内容别都堆在一个页面里')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('Tabs 适合把同一层级的内容分开看。我们先用组件自己的切换能力，不额外记录当前索引。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('顶部页签：最常见的分组方式', 'barPosition 放在 Start，TabContent 里写每个页面的内容。')
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            this.tabPanel(this.panels[0])
          }
          .tabBar('概览')

          TabContent() {
            this.tabPanel(this.panels[1])
          }
          .tabBar('参数')

          TabContent() {
            this.tabPanel(this.panels[2])
          }
          .tabBar('示例')
        }
        .width('100%')
        .height(240)
        .barMode(BarMode.Fixed)

        this.sectionTitle('底部页签：内容优先时可以这样放', 'barPosition 放在 End，页面主体会先进入视线。')
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            this.tabPanel(this.panels[0])
          }
          .tabBar('概览')

          TabContent() {
            this.tabPanel(this.panels[1])
          }
          .tabBar('参数')

          TabContent() {
            this.tabPanel(this.panels[2])
          }
          .tabBar('示例')
        }
        .width('100%')
        .height(240)
        .barMode(BarMode.Fixed)

        this.sectionTitle('可滚动标签：标签多了也别硬挤', 'barMode 用 Scrollable，标签数量多时更自然。')
        Tabs({ barPosition: BarPosition.Start }) {
          ForEach(this.panels, (item: TabPanelInfo) => {
            TabContent() {
              this.tabPanel(item)
            }
            .tabBar(item.title)
          }, (item: TabPanelInfo) => item.title)
        }
        .width('100%')
        .height(240)
        .barMode(BarMode.Scrollable)
        .scrollable(true)
      }
      .width('100%')
      .padding({ left: 18, right: 18, top: 22, bottom: 32 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}