鸿蒙(HarmonyOS)应用开发——容器组件（Tabs组件）

本文介绍: Ta bs是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tabs 组件必须配合子组件TabCon t ent一起使用设置Tabs的页签位置 index 设置初始化页签位置 controller 设置Tabs 控制器，用于控制Tab s 组件进行页签切换 tabBar 属性除了支持 string 类型，还支持使用@Builde r 装饰器修饰的函数@Entry@Co mp on entColumn() {})build() {

Tab s 介绍

Tab s是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tab s 组件必须配合子组件TabCon t ent一起使用

 Tabs({ barPosition: BarPosition, index?:number, controller: TabsController })

barPosition
设置Tabs的页签位置
index
设置初始化页签位置
controlle r
设置Tabs 控制器，用于控制Tabs组件进行页签切换

属性

v e rt ical

设置Tabs方向是否为纵向，默认为false

Tabs().vertical(boolean?)

barMod e

设置布局模式，默认时Fi x e d

Tabs().barMode(BarMode枚举)

BarMode枚举值

枚举值	索命
Fi xed	所有TabBar 平均分配barWi dt h 宽度，页签不可滚动
scrollable	所有TabBar 均使用实际布局宽度，页签可滚动

barWi dt h

页签的宽度

barHeig ht

页签的高度

设置TabBar位置

Tabs组件页签默认显示在顶部，但是我们可以通过设置TabBar的位置来更改，设置TabBar的位置，与vertical有关

vertical 的值	枚举值	说明
true	BarPos titon.Start	页签位于容器顶部
true	BarPos titon.end	页签位于容器底部
false	BarPos titon.Start	页签位于容器左侧
false	BarPos titon.end	页签位于容器右侧

Tabs({ barPosition: BarPosition.Start }) {
  ...
}
.vertical(false)

自定义TabBar样式

tabBar属性除了支持 string 类型，还支持使用@Bui lder装饰器修饰的函数

@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();

  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }
      .tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
    }
    .barWidth('100%')
    .barHeight(50)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}