Tabs（頁面導(dǎo)航）

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

基本布局

Tabs組件的頁面組成包含兩個(gè)部分，分別是TabContent和TabBar。TabContent是內(nèi)容頁，TabBar是導(dǎo)航頁簽欄，頁面結(jié)構(gòu)如下圖所示，根據(jù)不同的導(dǎo)航類型，布局會(huì)有區(qū)別，可以分為底部導(dǎo)航、頂部導(dǎo)航、側(cè)邊導(dǎo)航，其導(dǎo)航欄分別位于底部、頂部和側(cè)邊。

圖1 Tabs組件布局示意圖

Tabs使用花括號(hào)包裹TabContent，如圖2，其中TabContent顯示相應(yīng)的內(nèi)容頁。

每一個(gè)TabContent對應(yīng)的內(nèi)容需要有一個(gè)頁簽，可以通過TabContent的tabBar屬性進(jìn)行配置。在如下TabContent組件上設(shè)置屬性tabBar，可以設(shè)置其對應(yīng)頁簽中的內(nèi)容，tabBar作為內(nèi)容的頁簽。

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

設(shè)置多個(gè)內(nèi)容時(shí)，需在Tabs內(nèi)按照順序放置。

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

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

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

圖3 底部導(dǎo)航欄

導(dǎo)航欄位置使用Tabs的參數(shù)barPosition進(jìn)行設(shè)置，默認(rèn)情況下，導(dǎo)航欄位于頂部，參數(shù)默認(rèn)值為Start。設(shè)置為底部導(dǎo)航需要在Tabs傳遞參數(shù)，設(shè)置barPosition為End。

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

頂部導(dǎo)航

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

圖4 頂部導(dǎo)航欄

Tabs組件默認(rèn)的barPosition參數(shù)為Start，即頂部導(dǎo)航模式。

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

圖5 側(cè)邊導(dǎo)航欄

實(shí)現(xiàn)側(cè)邊導(dǎo)航欄需要設(shè)置Tabs的屬性vertical為true。在底部導(dǎo)航和頂部導(dǎo)航實(shí)現(xiàn)中，其默認(rèn)值為false，表明內(nèi)容頁和導(dǎo)航欄垂直方向排列。

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

限制導(dǎo)航欄的滑動(dòng)切換

默認(rèn)情況下，導(dǎo)航欄都支持滑動(dòng)切換，在一些內(nèi)容信息量需要進(jìn)行多級分類的頁面，如支持底部導(dǎo)航+頂部導(dǎo)航組合的情況下，底部導(dǎo)航欄的滑動(dòng)效果與頂部導(dǎo)航出現(xiàn)沖突，此時(shí)需要限制底部導(dǎo)航的滑動(dòng)，避免引起不好的用戶體驗(yàn)。

圖6 限制底部導(dǎo)航欄滑動(dòng)

控制滑動(dòng)切換的屬性為scrollable，默認(rèn)值為true，表示可以滑動(dòng)，若要限制滑動(dòng)切換頁簽則需要設(shè)置為false。

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

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

圖7 固定導(dǎo)航欄

Tabs的屬性barMode是控制導(dǎo)航欄是否可以滾動(dòng)，默認(rèn)值為Fixed。

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

圖8 可滾動(dòng)導(dǎo)航欄

滾動(dòng)導(dǎo)航欄需要設(shè)置Tabs組件的barMode屬性，默認(rèn)情況下其值為Fixed，表示為固定導(dǎo)航欄，設(shè)置為Scrollable即可設(shè)置為可滾動(dòng)導(dǎo)航欄。

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

圖9 自定義導(dǎo)航欄圖

系統(tǒng)默認(rèn)情況下采用了下劃線標(biāo)志當(dāng)前活躍的頁簽，而自定義導(dǎo)航欄需要自行實(shí)現(xiàn)相應(yīng)的樣式，用于區(qū)分當(dāng)前活躍頁簽和未活躍頁簽。

設(shè)置自定義導(dǎo)航欄需要使用tabBar的參數(shù)，以其支持的CustomBuilder的方式傳入自定義的函數(shù)組件樣式。例如這里聲明TabBuilder的自定義函數(shù)組件，傳入?yún)?shù)包括頁簽文字title，對應(yīng)位置index，以及選中狀態(tài)和未選中狀態(tài)的圖片資源。通過當(dāng)前活躍的currentIndex和頁簽對應(yīng)的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對應(yīng)tabBar屬性中傳入自定義函數(shù)組件，并傳遞相應(yīng)的參數(shù)。

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

圖10 使用自定義導(dǎo)航欄實(shí)現(xiàn)切換指定頁簽

切換指定頁簽需要使用TabsController，TabsController是Tabs組件的控制器，用于控制Tabs組件進(jìn)行頁簽切換。通過TabsController的changeIndex方法來實(shí)現(xiàn)跳轉(zhuǎn)至指定索引值對應(yīng)的TabContent內(nèi)容。

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

使用自定義導(dǎo)航欄時(shí)，在tabBar屬性中傳入對應(yīng)的@Builder，并傳入相應(yīng)的參數(shù)。

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

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

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

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

圖11 滑動(dòng)切換時(shí)頁簽內(nèi)容不聯(lián)動(dòng)

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

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

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

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

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

圖12 內(nèi)容與頁簽聯(lián)動(dòng)