鸿蒙开发中的Tabs组件详解

目录

前言

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

        运行之后，效果如如下：

图2.最简单的Tabs用法

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

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