openharmony容器组件之Tabs与TabContent

Tabs:一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图

Tabs(value: {barPosition?: BarPosition, index?: number, controller?: TabsController})
barPosition：指定页签位置来创建Tabs容器组件，默认BarPosition.Start
   BarPosition枚举说明
   Start：vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部
   End：vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部
index：指定初次初始页签索引，默认0
controller：设置Tabs控制器

属性：
vertical:是否为纵向Tab，默认为false
scrollable:是否可以通过左右滑动进行页面切换，默认为true
barMode:TabBar布局模式
   BarMode枚举说明：
   Scrollable:TabBar使用实际布局宽度, 超过总长度后可滑动
   Fixed:所有TabBar平均分配宽度。
barWidth:TabBar的宽度值，不设置时使用系统主题中的默认值
barHeight:TabBar的高度值，不设置时使用系统主题中的默认值
animationDuration:TabContent滑动动画时长,默认200

事件：
onChange(callback: (index: number) => void) Tab页签切换后触发的事件

TabsController：Tabs组件的控制器，用于控制Tabs组件进行页签切换
changeIndex(value: number): void 控制Tabs切换到指定页签
value:页签在Tabs里的索引值，索引值从0开始

TabContent：仅在Tabs中使用，对应一个切换页签的内容视图
属性：
tabBar：设置TabBar上显示内容
   string | //内容
   {icon?: string,text?: string}| //内容+图片
   CustomBuilder（API8）//构造器，内部可以传入组件（API8版本以上适用）

TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件
TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定

案例效果：

代码：

@Entry
@Component
struct TabsPage {
  private controller: TabsController = new TabsController()

  build() {

    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(true)
      .barMode(BarMode.Fixed)
      .barWidth(70)
      .barHeight(150)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .width('90%')
      .backgroundColor(0xF5F5F5)
    }
    .width('100%').height(300).margin({ top: 20 })
  }
}

openharmony容器组件之Tabs与TabContent

猜你喜欢