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

前言

前面一篇文章中，已经说了Gridt组件。那么接下来就是容器组件中的Tabs组件
根据功能分类基础组件容器组件媒体组件绘制组件画布组件 Column Row List Grid Tabs Swiper

Tabs 介绍

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

javascript 复制代码

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

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

属性

vertical

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

javascript 复制代码

Tabs().vertical(boolean?)

barMode

设置布局模式，默认时Fixed

javascript 复制代码

Tabs().barMode(BarMode枚举)

BarMode枚举值

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

barWidth

页签的宽度

barHeight

页签的高度

设置TabBar位置

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

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

javascript 复制代码

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

自定义TabBar样式

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

javascript 复制代码

@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;
    })
  }
}