現(xiàn)在市場上的大部分應用，主頁都是才用底部導航欄菜單作為頁面主體框架來展示，

在鴻蒙中是使用Tabs組件實現(xiàn)，下面我們開始講解Tab組件的使用。

Tabs介紹

Tabs是一個通過頁簽進行內(nèi)容視圖切換的容器組件，每個頁簽對應一個內(nèi)容視圖，它僅可包含子組件TabContent，同時搭配 TabsController使用。

TabsController 是Tabs組件的控制器，用于控制Tabs組件進行頁簽切換。不支持一個TabsController控制多個Tabs組件。
具體可查看官網(wǎng)介紹，這里就不多描述。

Tabs使用例子

@Entry
@Component
export struct MainPage {
  @State mCurrentPage: number = 0;
  private mTabController: TabsController = new TabsController()

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.mTabController }) {

      TabContent() {
        Text('第一個頁面')
      }
      .tabBar(this.TabBuilder(0))

      TabContent() {
        Text('第二個頁面')
      }
      .tabBar(this.TabBuilder(1))

      TabContent() {
        Text('第三個頁面')
      }
      .tabBar(this.TabBuilder(2))

    }
    .scrollable(true)
    .vertical(false)
    .barMode(BarMode.Fixed)
    .onChange((index) => {
      this.mCurrentPage = index;
    })

  }

  @Builder TabBuilder(index: number) {
    Column() {
      Image(index == this.mCurrentPage ? $r('app.media.icon_selected'): $r('app.media.icon_normal'))
        .width('24vp')
        .height('24vp')
        .objectFit(ImageFit.Contain)
      Text('菜單')
        .fontSize('10fp')
        .fontWeight(500)
        .fontColor(this.mCurrentPage === index ? $r('app.color.blue_3d9dff') : $r('app.color.gray_999999'))
        .margin({ top: '4vp' })
    }.justifyContent(FlexAlign.Center)
  }
}

這里對上面代碼進行講解，

1. 首先定義一個Tab容器組件，在其中擺放了三個TabContent子組件；
2. 使用vertical屬性跟barPosition: BarPosition.End配合即可以將導航欄顯示在頁面底部；
3. 使用scrollable開啟手勢滑動切換tab頁；
4. 定義 onChange函數(shù)，可以監(jiān)聽tab頁面切換事件，這里我們定義了一個全局變量記錄當前tab顯示子頁索引，通過該值可對底部欄的圖標跟文本進行樣式高亮處理。
5. 使用@Builder注解定義了一個TabBuilder的布局繪制方法，進行tab底部導航欄的繪制

上面代碼是一個比較粗糙的例子，由于tabBar設(shè)置調(diào)用同一個TabBuilder，因此繪制后，每個底部菜單是一模一樣的效果。

下面我們對其進行修改，讓它支持多個不同菜單繪制

TabBar 樣式設(shè)置

定義菜單樣式對象-NavigationItem

export interface NavigationItem {
  id: number; 
  text: Resource; //文本
  icon_normal: Resource; // 默認圖標
  icon_selected: Resource; // 選中圖標
}

定義一個底部菜單欄集合數(shù)據(jù)-NavigationList

export const NavigationList: NavigationItem[] = [
  {
    icon_normal: $r('app.media.main_icon_home'),
    icon_selected: $r('app.media.main_icon_home'),
    text: $r('app.string.tab_home'),
    id: 0
  },
  {
    icon_normal: $r('app.media.main_icon_life'),
    icon_selected: $r('app.media.main_icon_life'),
    text: $r('app.string.tab_life'),
    id: 1
  },
  {
    icon_normal: $r('app.media.main_icon_user'),
    icon_selected: $r('app.media.main_icon_user'),
    text: $r('app.string.tab_user'),
    id: 2
  },
]

修改TabBuilder

@Builder TabBuilder(item: NavigationItem) {

     Column() {
        Image(this.mCurrentPage === this.getTabIndexByItem(item) ? item.icon_selected : item.icon_normal)
          .width('24vp')
          .height('24vp')
          .objectFit(ImageFit.Contain)

        Text(item.text)
          .fontSize('10fp')
          .fontWeight(500)
          .fontColor(this.mCurrentPage === this.getTabIndexByItem(item) ? $r('app.color_blue_3d9dff') : $r('app.color.gray_999999'))
          .margin({ top: '4vp' })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
    }
  }

這里是根據(jù)NavigationItem ID動態(tài)找在數(shù)組中的索引。

getTabIndexByItem(navigationItem: NavigationItem): number {
    return this.mTabDataList.findIndex(item => item.id === navigationItem.id);
  }

通過傳入一個NavigationItem，對TabBuilder中的組件樣式進行動態(tài)配置。

Tab 組件控制

如果想要通過代碼去控制tab切換到指定子頁，可以使用 TabController來對tab進行控制，使用changeIndex函數(shù)進行切換。

題外話

本文到此結(jié)束，謝謝閱讀，由于時間匆忙，只能進行簡單講解，一些tab滑動動畫、tabItem的點擊樣式、tabbar分隔線的問題，后續(xù)有時間再進行補充。如有疑問，評論區(qū)溝通探討。文章來源地址http://www.zghlxwxcb.cn/news/detail-795221.html

到了這里，關(guān)于【鴻蒙應用ArkTS開發(fā)系列】- 導航欄Tab組件使用講解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！