Tabs（頁面導航）

當頁面信息較多時，為了讓用戶能夠聚焦于當前顯示的內容，需要對頁面內容進行分類，提高頁面空間利用率。Tabs組件可以在一個頁面內快速實現視圖內容的切換，一方面提升查找信息的效率，另一方面精簡用戶單次獲取到的信息量。

基本布局

Tabs組件的頁面組成包含兩個部分，分別是TabContent和TabBar。TabContent是內容頁，TabBar是導航頁簽欄，頁面結構如下圖所示，根據不同的導航類型，布局會有區(qū)別，可以分為底部導航、頂部導航、側邊導航，其導航欄分別位于底部、頂部和側邊。

圖1 Tabs組件布局示意圖

Tabs使用花括號包裹TabContent，如圖2，其中TabContent顯示相應的內容頁。

每一個TabContent對應的內容需要有一個頁簽，可以通過TabContent的tabBar屬性進行配置。在如下TabContent組件上設置屬性tabBar，可以設置其對應頁簽中的內容，tabBar作為內容的頁簽。

 TabContent() {
   Text('首頁的內容').fontSize(30)
 }
.tabBar('首頁')

設置多個內容時，需在Tabs內按照順序放置。

Tabs() {
  TabContent() {
    Text('首頁的內容').fontSize(30)
  }
  .tabBar('首頁')

  TabContent() {
    Text('推薦的內容').fontSize(30)
  }
  .tabBar('推薦')

  TabContent() {
    Text('發(fā)現的內容').fontSize(30)
  }
  .tabBar('發(fā)現')
  
  TabContent() {
    Text('我的內容').fontSize(30)
  }
  .tabBar("我的")
}

圖3 底部導航欄

導航欄位置使用Tabs的參數barPosition進行設置，默認情況下，導航欄位于頂部，參數默認值為Start。設置為底部導航需要在Tabs傳遞參數，設置barPosition為End。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的內容：首頁、發(fā)現、推薦、我的
  ...
}

頂部導航

當內容分類較多，用戶對不同內容的瀏覽概率相差不大，需要經?？焖偾袚Q時，一般采用頂部導航模式進行設計，作為對底部導航內容的進一步劃分，常見一些資訊類應用對內容的分類為關注、視頻、數碼，或者手機的主題應用中對主題進行進一步劃分為圖片、視頻、字體等。

圖4 頂部導航欄

Tabs組件默認的barPosition參數為Start，即頂部導航模式。

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的內容:關注、視頻、游戲、數碼、科技、體育、影視
  ...
}

圖5 側邊導航欄

實現側邊導航欄需要設置Tabs的屬性vertical為true。在底部導航和頂部導航實現中，其默認值為false，表明內容頁和導航欄垂直方向排列。

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的內容:首頁、發(fā)現、推薦、我的
  ...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

限制導航欄的滑動切換

默認情況下，導航欄都支持滑動切換，在一些內容信息量需要進行多級分類的頁面，如支持底部導航+頂部導航組合的情況下，底部導航欄的滑動效果與頂部導航出現沖突，此時需要限制底部導航的滑動，避免引起不好的用戶體驗。

圖6 限制底部導航欄滑動

控制滑動切換的屬性為scrollable，默認值為true，表示可以滑動，若要限制滑動切換頁簽則需要設置為false。

Tabs({ barPosition: BarPosition.End }) {
  TabContent(){
    Column(){
      Tabs(){
        // 頂部導航欄內容
        ...
      }
    }
    .backgroundColor('#ff08a8f1')
    .width('100%')
  }
  .tabBar('首頁')

  // 其他TabContent內容：發(fā)現、推薦、我的
  ...
}
.scrollable(false)

圖7 固定導航欄

Tabs的屬性barMode是控制導航欄是否可以滾動，默認值為Fixed。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的內容：首頁、發(fā)現、推薦、我的
  ...
}
.barMode(BarMode.Fixed)

圖8 可滾動導航欄

滾動導航欄需要設置Tabs組件的barMode屬性，默認情況下其值為Fixed，表示為固定導航欄，設置為Scrollable即可設置為可滾動導航欄。

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的內容：關注、視頻、游戲、數碼、科技、體育、影視、人文、藝術、自然、軍事
  ...
}
.barMode(BarMode.Scrollable)

圖9 自定義導航欄圖

系統(tǒng)默認情況下采用了下劃線標志當前活躍的頁簽，而自定義導航欄需要自行實現相應的樣式，用于區(qū)分當前活躍頁簽和未活躍頁簽。

設置自定義導航欄需要使用tabBar的參數，以其支持的CustomBuilder的方式傳入自定義的函數組件樣式。例如這里聲明TabBuilder的自定義函數組件，傳入參數包括頁簽文字title，對應位置index，以及選中狀態(tài)和未選中狀態(tài)的圖片資源。通過當前活躍的currentIndex和頁簽對應的targetIndex匹配與否，決定UI顯示的樣式。

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

在TabContent對應tabBar屬性中傳入自定義函數組件，并傳遞相應的參數。

TabContent() {
  Column(){
    Text('我的內容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

圖10 使用自定義導航欄實現切換指定頁簽

切換指定頁簽需要使用TabsController，TabsController是Tabs組件的控制器，用于控制Tabs組件進行頁簽切換。通過TabsController的changeIndex方法來實現跳轉至指定索引值對應的TabContent內容。

private tabsController : TabsController = new TabsController()
@State currentIndex:number = 0;

@Builder TabBuilder(title: string, targetIndex: number) {
  Column() {
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  ...
  .onClick(() => {
    this.currentIndex = targetIndex;
    this.tabsController.changeIndex(this.currentIndex);
  })
}

使用自定義導航欄時，在tabBar屬性中傳入對應的@Builder，并傳入相應的參數。

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent(){
    ...
  }.tabBar(this.TabBuilder('首頁',0))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('發(fā)現',1))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('推薦',2))

  TabContent(){
    ...
  }
  .tabBar(this.TabBuilder('我的',3))
}

圖11 滑動切換時頁簽內容不聯(lián)動

此時需要使用Tabs提供的onChange事件方法，監(jiān)聽索引index的變化，并將其當前活躍的index值傳遞給currentIndex，實現頁簽內容的切換。

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent() {
    ...
  }.tabBar(this.TabBuilder('首頁', 0))

  TabContent() {
    ...
  }.tabBar(this.TabBuilder('發(fā)現', 1))

  TabContent() {
    ...
  }.tabBar(this.TabBuilder('推薦', 2))

  TabContent() {
    ...
  }
  .tabBar(this.TabBuilder('我的', 3))
}.onChange((index) => {
  this.currentIndex = index
})

圖12 內容與頁簽聯(lián)動