Tabs
一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
权限列表
无
子组件
包含子组件TabContent。
接口说明
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: TabsController})
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
index | number | 否 | 0 | 指定初次初始页签索引。 |
controller | TabsController | 否 | - | 设置Tabs控制器。 |
BarPosition枚举说明
名称 | 描述 |
---|---|
Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
属性
不支持触摸热区设置。
名称 | 参数类型 | 默认值 | 描述 |
---|---|---|---|
vertical | boolean | false | 设置为false是为横向Tabs,设置为true时为纵向Tabs。 |
scrollable | boolean | true | 设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。 |
barMode | BarMode | BarMode.Fixed | TabBar布局模式,具体描述见BarMode枚举说明。 |
barWidth | number | string8+ | - | TabBar的宽度值。 |
barHeight | number | string8+ | - | TabBar的高度值。 |
animationDuration | number | 200 | TabContent滑动动画时长。 |
BarMode枚举说明
名称 | 描述 |
---|---|
Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 |
Fixed | 所有TabBar平均分配宽度。 |
事件
名称 | 功能描述 |
---|---|
onChange(callback: (index: number) => void) | Tab页签切换后触发的事件。 |
TabsController
Tabs组件的控制器,用于控制Tabs组件进行页签切换。
导入对象
controller: TabsController = new TabsController()
changeIndex
changeIndex(value: number): void
控制Tabs切换到指定页签。
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
value | number | 是 | - | 页签在Tabs里的索引值,索引值从0开始。 |
示例
// xxx.ets
@Entry
@Component
struct TabsExample {
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).scrollable(true).barMode(BarMode.Fixed)
.barWidth(70).barHeight(150).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.width('90%').backgroundColor(0xF5F5F5)
}.width('100%').height(150).margin({ top: 5 })
}
}