目录
一、Tabs 页签初相识
在 HarmonyOS 应用开发的奇妙世界里，Tabs 页签可是一个相当关键且实用的存在。想象一下，当你打开一个功能丰富的 HarmonyOS 应用，比如一款新闻资讯类 App，首页可能就通过 Tabs 页签，将不同类型的新闻内容，像时政新闻、娱乐新闻、体育赛事等，清晰地分类展示在同一页面中。又比如一款购物类应用，通过 Tabs 页签，把商品分类、购物车、个人订单、设置等不同功能模块在同一页面巧妙布局 。
从技术角度来讲，Tabs 页签主要包含两大部分，即 TabBar（标签栏）和 TabContent（内容区域）。TabBar 就像是一个目录索引，其中每个标签对应着不同类别的内容；而 TabContent 则是存放具体内容的地方，当用户点击 TabBar 上的某个标签时，对应的 TabContent 区域就会展示出相应的内容。它就好比一个精美的文件收纳盒，不同的 TabBar 标签是一个个分类标签，而 TabContent 则是每个分类标签下对应的文件存放区域，极大地提高了信息展示的效率和用户查找信息的便捷性。
二、Tabs 页签的基础结构
（一）TabContent 与 TabBar
在 HarmonyOS 应用开发里，Tabs 组件主要由 TabContent（内容页）和 TabBar（导航页签栏）这两大部分构成。TabContent 负责承载不同的页面内容，而 TabBar 则是用于切换这些内容的导航栏。下面通过一段简单的代码示例，让大家更直观地感受一下 Tabs 组件的基本布局：
@Entry
@Component
struct TabsExample {
build() {
Column() {
Tabs() {
TabContent() {
Text('这是首页内容')
.fontSize(30)
.textAlign(TextAlign.Center)
}.tabBar('首页')
TabContent() {
Text('这是推荐页内容')
.fontSize(30)
.textAlign(TextAlign.Center)
}.tabBar('推荐')
}
}
}
}
在上述代码中，我们创建了一个包含两个 Tab 的 Tabs 组件。每个 Tab 都由一个 TabContent 和对应的 tabBar 属性组成。TabContent 里放置了具体的文本内容，而 tabBar 则设置了该 Tab 的标题 。运行这段代码，我们就能看到一个简单的 Tabs 布局，通过点击 “首页” 和 “推荐” 这两个 Tab，就可以在不同的内容之间进行切换。
（二）基本使用步骤
在 HarmonyOS 中使用 Tabs 页签，一般需要遵循以下几个基础步骤：
- 创建 Tabs 组件：首先，在页面布局中引入 Tabs 组件，它是整个页签功能的容器。例如：
Tabs() {
// 这里放置TabContent子组件
}
- 添加 TabContent 子组件：在 Tabs 组件内部，为每个需要切换的页面添加一个 TabContent 子组件，并在其中填充具体的页面内容。比如：
Tabs() {
TabContent() {
// 首页内容布局
Column() {
Text('首页的主要信息展示区域')
.fontSize(24)
.textAlign(TextAlign.Center)
}
}.tabBar('首页')
TabContent() {
// 消息页内容布局
Column() {
Text('消息列表展示区域')
.fontSize(24)
.textAlign(TextAlign.Center)
}
}.tabBar('消息')
}
- 设置 tabBar 属性：通过 tabBar 属性，为每个 TabContent 设置对应的页签标题或自定义的页签样式。如果需要更复杂的自定义，还可以使用 @Builder 修饰的方法来创建自定义的 tabBar 样式。例如：
@Builder
tabBuilder(title: string, index: number) {
Row() {
if (index === 0) {
Image($r('app.media.home_icon'))
.width(24)
.height(24)
} else {
Image($r('app.media.message_icon'))
.width(24)
.height(24)
}
Text(title)
.fontSize(16)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
Tabs() {
TabContent() {
// 首页内容布局
}.tabBar(this.tabBuilder('首页', 0))
TabContent() {
// 消息页内容布局
}.tabBar(this.tabBuilder('消息', 1))
}
- 设置其他属性（可选）：根据实际需求，还可以设置 Tabs 组件的其他属性，如 barPosition（设置导航栏位置，默认在顶部，可设置为底部等）、scrollable（控制是否可通过滑动切换页签）、barMode（设置导航栏模式，如固定模式或滚动模式）等 。例如，将导航栏设置到底部：
Tabs({ barPosition: BarPosition.End }) {
// TabContent子组件
}
通过以上步骤，就可以在 HarmonyOS 应用中快速搭建起一个基本的 Tabs 页签功能，实现页面内容的便捷切换和展示 。
三、Tabs 页签的布局模式
（一）底部导航
底部导航是 HarmonyOS 应用中最为常见的一种导航方式 。当你打开一款社交类应用，像微信，底部导航栏通常会有 “微信”“通讯录”“发现”“我” 这几个 Tab。它的优势非常明显，首先，它位于应用一级页面的底部，用户打开应用就能清晰地分清整个应用的功能分类，以及每个页签对应的内容。其次，这种位置设计更方便用户单手操作，用户只需轻轻滑动拇指，就能轻松在不同的功能模块间进行切换 。在 HarmonyOS 开发中，要将导航栏设置为底部导航，只需在 Tabs 组件中设置 barPosition 属性为 BarPosition.End 即可 。例如：
Tabs({ barPosition: BarPosition.End }) {
TabContent() {
Te
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
