在鸿蒙（HarmonyOS Next）开发中，Tabs 容器组件是一个非常实用的UI元素，它允许用户通过标签页来浏览和切换不同的内容区域。Tabs 组件不仅提高了应用程序界面的组织性和可读性，还为用户提供了一种直观的方式来进行信息导航。下面我们详细探讨 Tabs 组件的使用方法、配置选项以及一些最佳实践。
环境及工具
HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发
容器组件Tabs
当页面内容较多时，可以通过Tabs组件进行分类展示，以下这些效果都可以通过Tabs组件来实现
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边
链接
基本用法
@Entry
@Component
struct demoTabbar {
build() {
Tabs() {
// 顶级容器 TabContent() {
// 内容区域：只能有一个子组件
} .tabBar('首页')
// 导航栏
}
}
示例：
@Entry
@Component
struct demoTabs {
build() {
Tabs() {
// 内容
TabContent() {
Text('首页的内容')
.fontSize(30)
}
// tabBar
.tabBar('首页')
TabContent() {
Text('推荐的内容')
.fontSize(30)
}
.tabBar('推荐')
TabContent() {
Text('发现的内容')
.fontSize(30)
}
.tabBar('发现')
TabContent() {
Text('我的内容')
.fontSize(30)
}
.tabBar("我的")
}
}
}
常用属性
默认的 tabs 已经可以实现切换，接下来咱们来看看如何通过属性控制他
1.垂直导航
2.导航位置
3.禁用滑动切换
通过 Tabs 的属性进行调整：
●vertical 属性即可调整导航为 水平 或 垂直
●barPosition 即可调整导航位置为 开头 或 结尾
●scrollable 即可调整是否允许 滑动切换
●animationDuration 设置动画时间 毫秒
滚动导航栏
如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动
@Entry
@Component
struct demoTabs {
titles: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']
build() {
// 外层容器
Tabs() {
// 内容
ForEach(this.titles, (title: string, index: number) => {
TabContent() {
Text(title + '的内容')
.fontSize(30)
}
.tabBar(title)
})
}
.barMode(BarMode.Scrollable)
}
}
注意事项
- 一致性设计：确保所有标签具有相似的设计风格和交互模式，这样可以帮助用户更容易上手并享受一致的用户体验。
- 测试多设备兼容性：由于不同设备屏幕尺寸各异，在开发过程中应充分测试应用程序在多种分辨率下的表现，确保布局适应性强且美观大方。
- 合理利用滚动功能：当标签数量超过屏幕宽度时，启用滚动功能可以让用户更方便地访问其他标签。
无从把握的时候才感到疲惫。只要去行动就能获得解放，哪怕做得不好也比无所作为强。 ---列夫·托尔斯泰-
