HarmonyOS NEXT 底部選項卡功能

威哥爱编程發表於2024-10-09

在HarmonyOS NEXT中使用ArkTS實現一個完整的底部選項卡功能，可以透過以下幾個步驟來完成：

  1. 建立Tabs元件：使用Tabs元件來建立底部導航欄，並透過barPosition屬性設定其位置為底部（BarPosition.End）。

  2. 新增TabContent子元件：在Tabs元件內部，為每個頁面建立一個TabContent子元件，這些子元件將包含每個選項卡頁面的內容。

  3. 配置TabBar：透過TabContent的tabBar屬性來配置每個選項卡的標題和圖示。可以使用自定義函式tabBuilder來構建每個選項卡的樣式，包括圖示和文字。

  4. 設定狀態和控制器：使用@State裝飾器來定義當前選中的選項卡索引，並使用TabsController來控制選項卡之間的切換。

  5. 自定義樣式：可以透過barMode、scrollable等屬性來自定義導航欄的樣式和行為，例如設定為固定寬度或滾動顯示。

  6. 事件處理：透過onChange事件來監聽選項卡的切換，並更新當前狀態。

以下是一個簡單的程式碼示例，展示瞭如何使用ArkTS實現底部選項卡功能：

@Entry
@Component
struct BottomTabExample {
  controller: TabsController = new TabsController()
  @State current: number = 0

  tabBuilder($$: { index: number; label: string; normalIcon: Resource; selectIcon: Resource }) {
    Column() {
      Image(this.current === $$.index ? $$.selectIcon : $$.normalIcon).width(26)
      Text($$.label)
        .fontSize('12fp')
        .fontColor(this.current === $$.index ? '#62C9D0' : '#909090')
        .margin({ top: 3 })
    }
    .width('100%')
    .onClick(() => {
      this.current = $$.index
      this.controller.changeIndex(this.current)
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Text('首頁的內容')
        }.tabBar(this.tabBuilder({
          index: 0,
          label: '首頁',
          normalIcon: $r('app.media.tabbar11'),
          selectIcon: $r('app.media.tabbar12')
        }))
        TabContent() {
          Text('發現的內容')
        }.tabBar(this.tabBuilder({
          index: 1,
          label: '發現',
          normalIcon: $r('app.media.tabbar21'),
          selectIcon: $r('app.media.tabbar22')
        }))
        // ... 其他TabContent配置
      }
      .width('100%')
      .barMode(BarMode.Fixed)
      .scrollable(true)
      .onChange(((index: number) => {
        this.current = index
      }))
    }
    .width('100%')
    .backgroundColor('#f2f2f2')
  }
}

我們建立了一個底部選項卡，每個選項卡都有對應的內容和圖示。當使用者點選不同的選項卡時，tabBuilder函式會更新當前選中的選項卡索引，並且TabsController會處理頁面的切換。透過onChange事件，我們可以監聽選項卡的變化並執行相應的邏輯。學習鴻蒙 NEXT 開發，國產應用開發，全靠你我他，加油。

相關文章