前言
前面一篇文章中，已经说了Gridt组件。那么接下来就是容器组件中的Tabs组件
Tabs 介绍
Tabs是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tabs组件必须配合子组件TabContent一起使用
Tabs({ barPosition: BarPosition, index?:number, controller: TabsController })
- barPosition
设置Tabs的页签位置 - index
设置初始化页签位置 - controller
设置Tabs 控制器，用于控制Tabs组件进行页签切换
属性
vertical
设置Tabs方向是否为纵向，默认为false
Tabs().vertical(boolean?)
barMode
设置布局模式，默认时Fixed
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 | 页签位于容器右侧 |
Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(false)
自定义TabBar样式
tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数
@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;})}
}
)
