ArkUI开发框架提供了一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图的容器组件 Tabs
,它允许包含子组件且子组件只能是 TabContent
,本节笔者介绍一下 Tabs
的简单使用。
Tabs定义介绍
interface TabsInterface {
(value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}
declare enum BarPosition {
Start,
End,
}
- barPosition:指定页签位置来创建
Tabs
容器组件,BarPosition
定义了以下两种类型:- Start(默认值):当
vertical
属性方法设置为 true 时,页签位于容器左侧;vertical
属性方法设置为 false 时,页签位于容器顶部。 - End:
vertical
属性方法设置为 true 时,页签位于容器右侧;vertical
属性方法设置为 false 时,页签位于容器底部。
- Start(默认值):当
- index:指定初次初始页签索引,默认值为 0 。
- controller:设置
Tabs
控制器。
简单样例如下所示:
@Entry @Component struct SideBarContainerTest {
private controller: TabsController = new TabsController();
build() {
Column() {
Tabs({// Tabs不设置vertical属性时,默认上下排版
barPosition: BarPosition.Start,
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.size({width: "100%", height: "100%"})
.tabBar("消息")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.size({width: "100%", height: "100%"})
.tabBar("联系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.size({width: "100%", height: "100%"})
.tabBar("动态")
}
.size({width: "100%", height: "100%"})
}
.width('100%')
.height('100%')
.padding(10)
}
}
样例运行结果如下图所示:
Tabs属性介绍
declare class TabsAttribute extends CommonMethod<TabsAttribute> {
vertical(value: boolean): TabsAttribute;
scrollable(value: boolean): TabsAttribute;
barMode(value: BarMode): TabsAttribute;
barWidth(value: Length): TabsAttribute;
barHeight(value: Length): TabsAttribute;
animationDuration(value: number): TabsAttribute;
}
-
vertical:设置 Tab 是否为左右排列,默认为 false ,表示上下排列。
-
verti