想给 App 加个「选项卡」功能？ArkUI 的 Tabs + TabContent 组合，能让你轻松上手——无论是顶部切换、左侧滑动，还是自定义图文标签，都能一气呵成。下面跟我一起，用更轻松的方式领略它的魅力吧！

---

一、组件一览

• **Tabs**：外层容器，决定了标签栏（TabBar）的位置、滑动方式、动画效果……
• **TabContent**：标签对应的视图区块，每一个都要声明一个 .tabBar(…)

---

二、快速示例：顶部两栏切换

一句话搞定基础用法：

@Entry @Component
struct MyTabsDemo {
  private tabsCtrl = new TabsController();

  build() {
    Tabs({
      barPosition: BarPosition.Start,   // 顶部横排
      controller: this.tabsCtrl
    }) {
      // 第一个标签页
      TabContent()
        .tabBar("首页")                  // 文字页签
      {
        Text("🏠 首页内容")
          .fontSize(28)
          .textAlign(TextAlign.Center)
          .padding(20);
      }

      // 第二个标签页
      TabContent()
        .tabBar("我的")
      {
        Text("👤 个人中心")
          .fontSize(28)
          .textAlign(TextAlign.Center)
          .padding(20);
      }
    }
    .width("100%")
    .height("100%");
  }
}

小贴士

• 不想让用户手指滑？加一行 .scrollable(false)。
• 想程序里切换？tabsCtrl.changeIndex(1) 几乎随叫随到。

---

三、玩转布局花样

1. 左侧竖排标签

Tabs({ barPosition: BarPosition.Start })
  .vertical(true)      // 左侧竖排
  .barWidth(80)        // 给页签留够宽度
  .barMode(BarMode.Fixed)

效果：图文并茂的侧边菜单，一屏搞定。

2. 底部滚动自适应

Tabs({ barPosition: BarPosition.End })
  .barMode(BarMode.Scrollable)   // 多标签可左右滑动
  .barHeight(50)                 // 页签栏高度

适合场景：标签数量多，内容更精彩。

---

四、标签风格随心定

• 文字：.tabBar("新闻")；

• 图标 + 文本：

  .tabBar({ icon: $r("app.media.icon_star"), text: "收藏" })
  

• 完全自定义：传入一个 Builder，让标签从容不迫地炫酷一下。

---

五、切换回调 & 动画

Tabs({ controller: ctrl })
  .animationDuration(400)         // 动画时长 400ms
  .onChange(idx => {
    console.log("切换到了第", idx, "页");
  });

每次用户切换，onChange 都能给你刷到最新的索引！

---

六、实战小案例

把上面所有花样融合，用最少的代码做出一个「新闻—关注—我」三标签界面：

@Entry @Component
struct NewsAppTabs {
  private ctrl = new TabsController();
  @State current = 0;

  build() {
    Tabs({ controller: this.ctrl })
      .barMode(BarMode.Fixed)
      .barHeight(48)
      .onChange(i => this.current = i) {
        ["新闻","关注","我"].map(label =>
          TabContent().tabBar(label)
        );
    }

    // 下方再放一个简易指示
    Text(`当前标签：${["新闻","关注","我"][this.current]}`)
      .fontSize(18)
      .margin({ top: 12 })
      .textAlign(TextAlign.Center);
  }
}

---

七、总结

• Tabs + TabContent —— 多视图切换轻松搞定
• .vertical()/.barPosition()/.barMode()/.scrollable() —— 随心布局、随处炫技
• .tabBar(...) —— 文本、图标、自定义……想怎么美就怎么来

玩出创意，才能让用户的每一次滑动都变成惊喜。赶快动手试试吧！