当前位置：首页 > ds >正文

鸿蒙开发中的Tabs组件详解

ds 2025/8/12 18:31:44

前言

1.基本布局

1.顶部导航

2.底部导航

3.侧边导航

2.Tabs的常用属性

1.scrollable

2.barModel

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("我的")}}
}

运行之后，效果如如下：