在我們常用的應(yīng)用中，經(jīng)常會有視圖內(nèi)容切換的場景，來展示更加豐富的內(nèi)容。比如下面這個頁面，點擊底部的頁簽的選項，可以實現(xiàn)“首頁”和“我的” 兩個內(nèi)容視圖的切換。

ArkUI開發(fā)框架提供了一種頁簽容器組件Tabs，開發(fā)者通過Tabs組件可以很容易的實現(xiàn)內(nèi)容視圖的切換。頁簽容器Tabs的形式多種多樣，不同的頁面設(shè)計頁簽不一樣，可以把頁簽設(shè)置在底部、頂部或者側(cè)邊。

本文將詳細(xì)介紹Tabs組件的使用。

Tabs組件的簡單使用

Tabs組件僅可包含子組件TabContent，每一個頁簽對應(yīng)一個內(nèi)容視圖即TabContent組件。下面的示例代碼構(gòu)建了一個簡單的頁簽頁面：

@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.Green)
        }
        .tabBar('green')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar('blue')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }
        .tabBar('yellow')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar('pink')
      }
      .barWidth('100%') // 設(shè)置TabBar寬度
      .barHeight(60) // 設(shè)置TabBar高度
      .width('100%') // 設(shè)置Tabs組件寬度
      .height('100%') // 設(shè)置Tabs組件高度
      .backgroundColor(0xF5F5F5) // 設(shè)置Tabs組件背景顏色
    }
    .width('100%')
    .height('100%')
  }
}

效果圖如下：

上面示例代碼中，Tabs組件中包含4個子組件TabContent，通過TabContent的tabBar屬性設(shè)置TabBar的顯示內(nèi)容。使用通用屬性width和height設(shè)置了Tabs組件的寬高，使用barWidth和barHeight設(shè)置了TabBar的寬度和高度。

說明

• TabContent組件不支持設(shè)置通用寬度屬性，其寬度默認(rèn)撐滿Tabs父組件。
• TabContent組件不支持設(shè)置通用高度屬性，其高度由Tabs父組件高度與TabBar組件高度決定。

設(shè)置TabBar布局模式

因為Tabs的布局模式默認(rèn)是Fixed的，所以Tabs的頁簽是不可滑動的。當(dāng)頁簽比較多的時候，可能會導(dǎo)致頁簽顯示不全，將布局模式設(shè)置為Scrollable的話，可以實現(xiàn)頁簽的滾動。 Tabs的布局模式有Fixed（默認(rèn)）和Scrollable兩種：

• BarMode.Fixed：所有TabBar平均分配barWidth寬度（縱向時平均分配barHeight高度）,頁簽不可滾動，效果圖如下：

• BarMode.Scrollable：每一個TabBar均使用實際布局寬度，超過總長度（橫向Tabs的barWidth，縱向Tabs的barHeight）后可滑動。

• 當(dāng)頁簽比較多的時候，可以滑動頁簽，下面的示例代碼將barMode設(shè)置為BarMode.Scrollable，實現(xiàn)了可滾動的頁簽：

@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.Green)
        }
        .tabBar('green')
 
 TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Blue)
        }
        .tabBar('blue')
 
        ...
 
      }
      .barMode(BarMode.Scrollable)
      .barWidth('100%')
      .barHeight(60)
      .width('100%')
      .height('100%')
    }
  }
}

設(shè)置TabBar位置和排列方向 Tabs組件頁簽?zāi)J(rèn)顯示在頂部，某些場景下您可能希望Tabs頁簽出現(xiàn)在底部或者側(cè)邊，您可以使用Tabs組件接口中的參數(shù)barPosition設(shè)置頁簽位置。此外頁簽顯示位置還與vertical屬性相關(guān)聯(lián)，vertical屬性用于設(shè)置頁簽的排列方向，當(dāng)vertical的屬性值為false（默認(rèn)值）時頁簽橫向排列，為true時頁簽縱向排列。 barPosition的值可以設(shè)置為BarPosition.Start（默認(rèn)值）和BarPosition.End：

• BarPosition.Startvertical屬性方法設(shè)置為false（默認(rèn)值）時，頁簽位于容器頂部。

Tabs({ barPosition: BarPosition.Start }) {
  ...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)

效果圖如下：

vertical屬性方法設(shè)置為true時，頁簽位于容器左側(cè)。

Tabs({ barPosition: BarPosition.Start }) {
  ...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)

效果圖如下：

• BarPosition.Endvertical屬性方法設(shè)置為false時，頁簽位于容器底部。

Tabs({ barPosition: BarPosition.End }) {
  ...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)

效果圖如下：

vertical屬性方法設(shè)置為true時，頁簽位于容器右側(cè)。

Tabs({ barPosition: BarPosition.End}) {
  ...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)

效果圖如下：

自定義TabBar樣式

TabBar的默認(rèn)顯示效果如下所示：

往往開發(fā)過程中，UX給我們的設(shè)計效果可能并不是這樣的，比如下面的這種底部頁簽效果：

TabContent的tabBar屬性除了支持string類型，還支持使用@Builder裝飾器修飾的函數(shù)。您可以使用@Builder裝飾器，構(gòu)造一個生成自定義TabBar樣式的函數(shù)，實現(xiàn)上面的底部頁簽效果，示例代碼如下：

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

示例代碼中將barPosition的值設(shè)置為BarPosition.End，使頁簽顯示在底部。使用@Builder修飾TabBuilder函數(shù)，生成由Image和Text組成的頁簽。同時也給Tabs組件設(shè)置了TabsController控制器，當(dāng)點擊某個頁簽時，調(diào)用changeIndex方法進行頁簽內(nèi)容切換。 最后還需要給Tabs添加onChange事件，Tab頁簽切換后觸發(fā)該事件，這樣當(dāng)我們左右滑動內(nèi)容視圖的時候，頁簽樣式也會跟著改變。

審核編輯 黃宇