HarmonyOS（七）頁簽切換

List組件和Grid組件的使用

Tabs組件的使用

概述

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

兩個內(nèi)容視圖的切換。

ArkUI開發(fā)框架提供了一種頁簽容器組件Tabs，開發(fā)者通過Tabs組件可以很容易的實(shí)現(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布局模式

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

Tabs的布局模式有Fixed（默認(rèn)）和Scrollable兩種：

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

  

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

  

• 當(dāng)頁簽比較多的時候，可以滑動頁簽，下面的示例代碼將barMode設(shè)置為BarMode.Scrollable，實(shí)現(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.Start

  vertical屬性方法設(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.End

  vertical屬性方法設(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ù)，實(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ǎn)擊某個頁簽時，調(diào)用changeIndex方法進(jìn)行頁簽內(nèi)容切換。

最后還需要給Tabs添加onChange事件，Tab頁簽切換后觸發(fā)該事件，這樣當(dāng)我們左右滑動內(nèi)容視圖的時候，頁簽樣式也會跟著改變。

參考

• Tabs組件的更多屬性和參數(shù)的使用，可以參考API：Tabs。
• @Builder裝飾器的使用，可以參考：@Builder。