关于鸿蒙开发中容器组件Tabs的介绍

当页面内容较多时，可以通过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（毫秒） 默认值： API version 10及以前，不设置该属性或设置为null时，默认值为0，即点击TabBar页签和调用TabsController的changeIndex接口切换TabContent无动画。设置为小于0或undefined时，默认值为300。 API version 11及以后，不设置该属性或设置为异常值，且设置TabBar为BottomTabBarStyle样式时，默认值为0。设置TabBar为其他样式时，默认值为300。
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结构
}

高亮切换

核心思路

1. 监听切换事件 → 得到索引值，记录高亮的索引
2. 给每个tabBar起个标记，0，1，2
3. 在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、通过页签处点击触发。