ArkUI開發(fā)框架提供了一種可以通過頁簽進行內容視圖切換的容器組件潮模，每個頁簽對應一個內容視圖的容器組件 Tabs ，它允許包含子組件且子組件只能是 TabContent 痴施，本節(jié)筆者介紹一下 Tabs 的簡單使用擎厢。
Tabs定義介紹
interface TabsInterface {
(value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}
declare enum BarPosition {
Start,
End,
}
-
barPosition：指定頁簽位置來創(chuàng)建
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("聯(lián)系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.size({width: "100%", height: "100%"})
.tabBar("動態(tài)")
}
.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 缝左，表示上下排列。
vertical設置為false：
barPosition: BarPosition.Start
Tabs({
barPosition: BarPosition.Start, // 設置Tab在上方
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.tabBar("消息")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.tabBar("聯(lián)系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.tabBar("動態(tài)")
}
.vertical(false)
樣例運行結果如下圖所示：
- barPosition: BarPosition.End
Tabs({
barPosition: BarPosition.End, // 設置Tab在下方
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.tabBar("消息")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.tabBar("聯(lián)系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.tabBar("動態(tài)")
}
.vertical(false)
樣例運行結果如下圖所示：
- vertical設置為true：
- barPosition: BarPosition.Start
簡單樣例如下所示：
Tabs({
barPosition: BarPosition.Start, // 設置Tab在左側
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.tabBar("消息")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.tabBar("聯(lián)系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.tabBar("動態(tài)")
}
.width('100%')
.height('100%')
.barWidth(80)
.barHeight(150)
.vertical(true)
- barPosition: BarPosition.End
Tabs({
barPosition: BarPosition.End, // 設置Tab在右側
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.tabBar("消息")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.tabBar("聯(lián)系人")
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.tabBar("動態(tài)")
}
.width('100%')
.height('100%')
.barWidth(80)
.barHeight(150)
.vertical(true)
- scrollable：是否可以通過滑動進行頁面切換，默認為 true 渺杉，表示可以滑動切換頁面蛇数。
-
barMode：設置
TabBar的布局模式，TabBar的類型說明如下：-
Scrollable：
TabBar使用實際布局寬度, 超過總長度后可滑動是越。 -
Fixed：所有
TabBar平均分配寬度耳舅。
-
Scrollable：
-
barWidth：設置
TabBar的寬度值，不設置時使用系統(tǒng)主題中的默認值倚评。 -
barHeight：設置
TabBar的高度值浦徊，不設置時使用系統(tǒng)主題中的默認值。 -
animationDuration：設置
TabContent滑動動畫時長天梧，默認值為 200 盔性。
Tabs事件介紹
declare class TabsAttribute extends CommonMethod<TabsAttribute> {
onChange(event: (index: number) => void): TabsAttribute;
}
-
onChange：
Tabs頁簽切換后觸發(fā)的事件，index表示當前頁簽下標腿倚。
TabContent定義介紹
interface TabContentInterface {
(): TabContentAttribute;
}
由源碼可知纯出， TabContent 目前不需要配置默認參數(shù)蚯妇。
TabContent屬性介紹
declare class TabContentAttribute extends CommonMethod<TabContentAttribute> {
tabBar(value: string | Resource | CustomBuilder |
{ icon?: string | Resource; text?: string | Resource }): TabContentAttribute;
}
-
tabBar：設置
TabBar的顯示標簽敷燎，根據(jù)源碼可知，tabBar參數(shù)類型支持多種數(shù)據(jù)類型：- string | Resource：直接使用文本箩言，樣式使用系統(tǒng)自帶的硬贯。
-
{ icon?: string | Resource; text?: string | Resource }：
- icon：設置標簽的圖標。
- text：設置標簽的文本陨收。
-
CustomBuilder：自定義
TabBar標簽
Tabs完整樣例
@Entry @Component struct TabsTest {
private controller: TabsController = new TabsController();
@State index: number = 0; // 選項卡下標饭豹，默認為第一個
@Builder tabMessage() { // 自定義消息標簽
Column() {
Column() {
Blank()
Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
.size({width: 25, height: 25})
Text('消息')
.fontSize(16)
.fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
Blank()
}
.height('100%')
.width("100%")
.onClick(() => {
this.index = 0;
this.controller.changeIndex(this.index);
})
}
}
@Builder tabContract() { // 自定義聯(lián)系人標簽
Column() {
Blank()
Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
.size({width: 25, height: 25})
Text('聯(lián)系人')
.fontSize(16)
.fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
Blank()
}
.height('100%')
.width("100%")
.onClick(() => {
this.index = 1;
this.controller.changeIndex(this.index);
})
}
@Builder tabDynamic() { // 自定義動態(tài)標簽
Column() {
Blank()
Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
.size({width: 25, height: 25})
Text('動態(tài)')
.fontSize(16)
.fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
Blank()
}
.height('100%')
.width("100%")
.onClick(() => {
this.index = 2;
this.controller.changeIndex(this.index);
})
}
build() {
Column() {
Tabs({
barPosition: BarPosition.End, // TabBar排列在下方
controller: this.controller // 綁定控制器
}) {
TabContent() {
Column() {
Text('消息')
.fontSize(30)
}
.width('100%')
.height('100%')
.backgroundColor("#aabbcc")
}
.tabBar(this.tabMessage) // 使用自定義TabBar
TabContent() {
Column() {
Text('聯(lián)系人')
.fontSize(30)
}
.width('100%')
.height('100%')
.backgroundColor("#bbccaa")
}
.tabBar(this.tabContract) // 使用自定義TabBar
TabContent() {
Column() {
Text('動態(tài)')
.fontSize(30)
}
.width('100%')
.height('100%')
.backgroundColor("#ccaabb")
}
.tabBar(this.tabDynamic) // 使用自定義TabBar
}
.width('100%')
.height('100%')
.barHeight(60)
.barMode(BarMode.Fixed) // TabBar均分
.onChange((index: number) => { // 頁面切換回調
this.index = index;
})
}
.width('100%')
.height('100%')
}
}
寫在最后
如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
- 點贊务漩，轉發(fā)拄衰，有你們的 『點贊和評論』，才是我創(chuàng)造的動力饵骨。
- 關注小編翘悉，同時可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識居触。
- 想要獲取更多完整鴻蒙最新學習知識點妖混，請移步前往小編：
https://gitee.com/MNxiaona/733GH/blob/master/jianshu
