鸿蒙开发中的Tabs组件详解

发布于：2025-08-10 ⋅ 阅读:(34) ⋅ 点赞:(0)

目录

2.Tabs的常用属性

3.自定义导航栏

1.自定义导航栏样式

2.修改标签栏的下标

前言

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

Tabs是鸿蒙（HarmonyOS）开发中常用的导航组件，用于在不同内容区域之间快速切换。通过Tabs，开发者可以轻松实现分页布局，提升应用的用户体验。以下将详细介绍Tabs的使用方法、常见场景及注意事项。

1.基本布局

1.顶部导航

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

三种导航模式样式分别下图所示：

图1.Tabs的三种导航模式

这里要注意的是：

1.TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。

2.TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs使用花括号包裹TabContent，如图2，其中TabContent显示相应的内容页。

我们通过简单Tabs嵌套几个TabContent便可以实现一个简单的Tabs。

核心代码如下：

@Entry
@Component
struct Index {
  build() {
    Tabs() {
      TabContent() {
        Text('首页的内容').fontSize(30)
      }
      .tabBar('首页')

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

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

      TabContent() {
        Text('我的内容').fontSize(30)
      }
      .tabBar("我的")
    }
  }
}

运行之后，效果如如下：

图2.最简单的Tabs用法

设置多个内容时，需在Tabs内按照顺序放置。

当内容分类较多，用户对不同内容的浏览概率相差不大，需要经常快速切换时，一般采用顶部导航模式进行设计，作为对底部导航内容的进一步划分，常见一些资讯类应用对内容的分类为关注、视频、数码，或者主题应用中对主题进行进一步划分为图片、视频、字体等。