当页面内容较多时,可以通过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、通过页签处点击触发。