HarmonyOS6 ArkTS Tabs 组件 TabBar 布局模式配置

Tabs 与 TabBar 基础

Tabs 组件由 TabBar（页签导航栏）和 TabContent（对应内容区）两部分组成。TabBar 作为导航入口，其布局模式直接影响页面美观与操作流畅度。

核心属性：barMode

• 作用：定义 TabBar 的布局规则，控制页签宽度分配与滚动能力
• 类型：BarMode 枚举，包含两种核心模式
  • BarMode.Fixed：固定均分模式（默认值）
  • BarMode.Scrollable：可滚动模式
• 配置位置：Tabs 组件的链式调用属性

两种布局模式

1. BarMode.Fixed（固定均分模式）

核心特性

• 宽度均分：所有 TabBar 页签自动平均分配 TabBar 总宽度，每个页签宽度完全一致
• 不可滚动：TabBar 区域固定，无法横向滑动，页签数量超出屏幕宽度时会被挤压截断
• 布局稳定：页签位置固定，适合数量少、内容固定的导航场景

适用场景

• 应用底部导航栏（通常 3-5 个固定页签，如首页、分类、我的）
• 页签数量固定且较少（≤5 个），无需动态扩展的场景
• 要求导航栏布局稳定、无滚动行为的界面

代码配置

Tabs(){
    // TabContent 定义...
}.barMode(BarMode.Fixed) // 配置固定均分模式

2. BarMode.Scrollable（可滚动模式）

核心特性

• 自适应宽度：每个 TabBar 页签宽度由内容（文字/图标）实际长度决定，非强制均分
• 支持滚动：当所有页签总宽度超出 TabBar 容器宽度时，可横向滑动显示隐藏页签
• 布局灵活：适配大量页签场景，内容展示更完整

适用场景

• 应用顶部分类导航（如新闻频道、商品分类，页签数量多且不固定）
• 页签文字长度差异大、需自适应宽度的场景
• 动态增减页签、内容可扩展的导航界面

代码配置

Tabs(){
    // TabContent 定义...
}.barMode(BarMode.Scrollable) // 配置可滚动模式

完整代码

// xxx.ets@Entry
@Component
struct TabsExample {
    @State text: string = '文本';
    @State barMode: BarMode = BarMode.Fixed;

    build() {
        Column() {
            // 文本控制按钮
            Row() {
                Button('文本增加 ').width('47%').height(50).backgroundColor(Color.Blue).fontColor(Color.White).borderRadius(12).onClick(() => {
                    this.text += '文本增加';
                }).margin({ right: '6%', bottom: 12 })
                Button('文本重置').width('47%').height(50).backgroundColor(Color.Orange).fontColor(Color.White).borderRadius(12).onClick(() => {
                    this.text = '文本';
                }).margin({ bottom: 12 })
            }
            // 模式切换按钮
            Row() {
                Button('Fixed 固定模式').width('47%').height(50).backgroundColor('#0088ff').fontColor(Color.White).borderRadius(12).onClick(() => {
                    this.barMode = BarMode.Fixed;
                }).margin({ right: '6%', bottom: 12 })
                Button('Scrollable 滚动模式').width('47%').height(50).backgroundColor('#33bb33').fontColor(Color.White).borderRadius(12).onClick(() => {
                    this.barMode = BarMode.Scrollable;
                }).margin({ bottom: 12 })
            }
            // 核心 Tabs 组件
            Tabs() {
                TabContent() {
                    Column().width('100%').height('100%').backgroundColor(Color.Pink)
                }.tabBar(`${this.text} 页面 1`)
                TabContent() {
                    Column().width('100%').height('100%').backgroundColor(Color.Green)
                }.tabBar(`${this.text} 页面 2`)
                TabContent() {
                    Column().width('100%').height('100%').backgroundColor(Color.Blue)
                }.tabBar(`${this.text} 页面 3`)
            }.height('60%').backgroundColor(0xf1f3f5).barMode(this.barMode).scrollable(true).animationDuration(300)
        }.width('100%').height('100%').padding(24)
    }
}