当页面内容较多时，可以通过Tabs组件进行 分类展示。
Tabs基本用法
struct TabbarDemo {
build() {
// 外层顶级容器
Tabs() {
TabContent(){
// 内容区域：只能有一个子组件
Text('首页内容')
}
.tabBar('首页')// 导航栏
TabContent(){
// 内容区域：只能有一个子组件
Text('推荐内容')
}
.tabBar('推荐')// 导航栏
.......
}
}
}Tabs常用属性
| 属性名 | 参数类型 | 说明 |
|---|---|---|
| barPosition | BarPosition | 设置Tabs的页签位置。 默认值：BarPosition.Start |
| vertical | boolean | 是否为纵向Tab。 默认值：false，为true时为纵向。 当横向Tabs设置height为auto时，Tabs组件高度自适应子组件高度，即为tabBar高度 + divider线宽 + TabContent高度 + 上下padding值 + 上下border宽度。 当纵向Tabs设置width为auto时，Tabs组件宽度自适应子组件宽度，即为tabBar宽度 + divider线宽 + TabContent宽度 + 左右padding值 + 左右border宽度。 尽量保持每一个页面中的子组件尺寸大小一致，避免滑动页面时出现页面切换动画跳动现象。 |
| scrollable | boolean | 是否可以通过滑动页面进行页面切换。 默认值：true，为false时不可以滑动切换页面。 |
| animationDuration | number | 点击滑动动画时间 单位：ms（毫秒） 默认值：
|
| barMode | BarMode | 布局模式 默认值：BarMode.Fixed |
BarPosition枚举说明
| 名称 | 描述 |
|---|---|
| Start | vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。 |
| End | vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。 |
BarMode枚举说明
| 名称 | 值 | 描述 |
|---|---|---|
| Scrollable | 0 | 每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向的barHeight）后可滑动。 |
| Fixed | 1 | 所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。 |
滚动导航栏
如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动。
可以通过Tabs组件的barMode属性即可调整 固定导航栏 或 滚动导航栏。
Tabs() {
// 内容区域
}
.barMode(BarMode.Scrollable)// 滚动
// .barMode(BarMode.Fixed) //默认值自定义TabBar
TabrBar在底部，一般会显示 图形 和 文字，甚至有 特殊的图标。
基础结构
Tabs() {
TabContent() { 内容区域 }
.tabBar(this.tabBarBuilder())
}
@Builder
tabBarBuilder(){
// 自定义的Tabbar结构
}高亮切换
核心思路
- 监听切换事件 → 得到索引值，记录高亮的索引
- 给每个tabBar起个标记，0，1，2
- 在tabBar内部比较 标记 == 记录的索引？高亮 ：不高亮
切换事件
| 名称 | 功能描述 |
|---|---|
| onChange(event: (index: number) => void) | Tab页切换后触发的事件 index：当前显示的index索引，索引从0开始计算 何时触发：滑动切换、点击切换 |
| onTabBarClick(event: (index: number) => void)10+ | Tab页签点击后触发的事件 index：被点击的index索引，索引从0开始计算 何时触发：点击切换 |
onChange触发条件：
1、TabContent支持滑动时，组件触发滑动时触发。
2、通过控制器API接口调用。
3、通过状态变量构造的属性值进行修改。
4、通过页签处点击触发。
标签：TabContent,鸿蒙,Tabs,切换,设置,组件,默认值 From： https://blog.csdn.net/qq_45569925/article/details/141277974