鸿蒙5.0开发：ArkUI组件（Tabs）

最新推荐文章于 2026-02-02 17:30:27 发布

原创

最新推荐文章于 2026-02-02 17:30:27 发布 · 1.1k 阅读

文章标签：

#harmonyos #华为 #android #驱动开发 #嵌入式硬件 #鸿蒙 #前端

往期鸿蒙全套实战文章必看：

鸿蒙开发核心知识点，看这篇文章就够了
最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

🚀一、Tabs

Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。

Tabs组件的主要功能包括：

切换选项卡：用户可以通过点击标签来切换显示面板。
激活状态：当前选中的标签会呈现激活状态，以便用户清楚地知道他们当前所在的选项卡。
自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
加载延迟：如果页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。

🔎1.基本布局

在这里插入图片描述
Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}
</