鸿蒙组件学习

鸿蒙组件学习_Tabs组件

说明

该组件从API Version 7 开始支持。

子组件

仅可包含子组件TabContent

参数

barPosition     设置Tabs的页签位置,默认值: BarPosition.Start
    Start   vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。
    End     vertical属性方法设置true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。
index   设置初始页签索引,默认值: 0,可选值[0,TabContent子节点数量-1]
controller  设置Tabs控制器(TabsController)

属性

vertical    设置为false时为横向Tabs,设置为true时为纵向Tabs。默认值(false)
scrollable  设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。默认值:true
barMode     TabBar布局模式
    Scrollable  超过该TabBar总长度可滑动
    Fixed   所有TabBar平均分配barWidth宽度
barWidth    TarBar的宽度值
barHeight   TabBar的高度值
animationDuration   TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。

事件

onChange((index) => {}) Tab页切换后触发的事件
触发该事件的条件:
1. TabContent支持滑动时，组件触发滑动时触发。
2. 通过控制器API接口调用。
3. 通过状态变量构造的属性值进行修改。
4. 通过页签处点击触发。

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页面切换。不支持一个TabsController控制多个Tabs组件。
方法: changeIndex(value) 页签在Tabs里的索引值,索引值从0开始。

练习

@Entry
@Component
struct TabsTest {
  private controller: TabsController = new TabsController()
  private index: number = 0
  build() {
    Column(){
      Tabs({
        barPosition: BarPosition.End,
        index: this.index,
        controller: this.controller
      }){
        TabContent(){
          Text('首页')
        }.tabBar('首页')
        TabContent(){
          Text('分类')
        }.tabBar('分类')
        TabContent(){
          Text('购物')
        }.tabBar('购物')
        TabContent(){
          Text('我的')
        }.tabBar('我的')
      }.vertical(false)
      .barPosition(BarPosition.End)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(300)
      .barHeight(50)
      .animationDuration(100)
      .onChange((index) => {
        this.index = index
      })
      .height('90%')
      Button('切换下一个')
        .onClick(() => {
          this.controller.changeIndex((this.index + 1) % 4)
        })
    }
  }
}