手把手教你華為鴻蒙開發之第十節

The旺發表於2024-12-10
鴻蒙

華為鴻蒙開發：深入探索Tabs元件的定製與應用

引言

在移動應用設計中，標籤頁（Tabs）是使用者切換不同內容區塊的重要介面元素。華為鴻蒙作業系統提供的Tabs元件支援開發者建立高度定製化的標籤頁介面。本文將透過 DevEco Studio 詳細介紹Tabs元件的使用，包括基本設定、動態生成標籤頁、以及如何透過自定義元件來實現獨特的視覺效果。

Tabs元件基礎

Tabs元件允許開發者建立一組可滑動的標籤頁，每個標籤頁對應不同的內容區域。

基本使用

示例1：建立基礎Tabs標籤頁

@Entry
@Component
struct Index {
  build() {
    Tabs() {
      TabContent() {
        Text('探索內容') // 有且只能一個子元件
      }
      .tabBar('探索') // 配置導航

      TabContent() {
        Text('趨勢內容') // 有且只能一個子元件
      }
      .tabBar('趨勢')

      TabContent() {
        Text('熱點內容') // 有且只能一個子元件
      }
      .tabBar('熱點')

      TabContent() {
        Text('個人中心內容') // 有且只能一個子元件
      }
      .tabBar('個人中心')
    }
  }
}

在這個示例中，我們建立了一個包含四個標籤頁的Tabs元件，每個標籤頁顯示不同主題的文字內容。

配置導航

示例2：配置Tabs導航屬性

@Entry
@Component
struct Index {
  build() {
    Tabs({
      barPosition: BarPosition.Start // 導航位置
    })
    {
      TabContent() {
        Text('探索內容')
      }
      .tabBar('探索')

      TabContent() {
        Text('趨勢內容')
      }
      .tabBar('趨勢')

      TabContent() {
        Text('熱點內容')
      }
      .tabBar('熱點')

      TabContent() {
        Text('個人中心內容')
      }
      .tabBar('個人中心')
    }
    .vertical(false) // 調整導航水平或垂直
    .scrollable(false) // 是否開啟手勢滑動
    .animationDuration(0) // 點選滑動的動畫時間
  }
}

在這個示例中，我們配置了Tabs元件的導航屬性，包括導航位置、滾動手勢和動畫時間。

動態生成Tabs

示例3：使用ForEach動態生成Tabs

@Entry
@Component
struct Index {
  titles: string[] = [
    '探索', '趨勢', '熱點', '科技', '娛樂',
    '體育', '教育', '健康', '財經', '旅遊'
  ]

  build() {
    Tabs() {
      ForEach(this.titles, (item: string, index) => {
        TabContent() {
          Text(`${item}內容`)
        }
        .tabBar(item)
      })
    }
    .barMode(BarMode.Scrollable) // 實現滾動導航欄
  }
}

在這個示例中，我們使用ForEach迴圈動態生成了10個標籤頁，每個標籤頁的標題都是從titles陣列中獲取的。

自定義Tabs樣式

示例4：自定義Tabs樣式

@Entry
@Component
struct Index {
  @Builder
  myBuilder(title: string, img: ResourceStr) {
    Column() {
      Image(img)
        .width(30)
      Text(title)
    }
  }

  build() {
    Tabs({
      barPosition: BarPosition.End
    })
    {
      TabContent() {
        Text('訊息中心內容')
      }
      .tabBar(this.myBuilder('訊息中心', $r('app.media.ic_tabbar_icon_1')))

      TabContent() {
        Text('設定中心內容')
      }
      .tabBar(this.myBuilder('設定中心', $r('app.media.ic_tabbar_icon_2')))
    }
  }
}

在這個示例中，我們定義了一個@Builder函式myBuilder來自定義每個標籤頁的樣式，包括圖片和文字。

狀態管理

示例5：管理Tabs啟用狀態

@Entry
@Component
struct Index {
  @State selectedIndex: number = 0

  @Builder
  myBuilder(itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  build() {
    Tabs()
    {
      TabContent() {
        Text('訊息中心內容')
      }
      .tabBar(this.myBuilder(0, '訊息中心', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))

      TabContent() {
        Text('設定中心內容')
      }
      .tabBar(this.myBuilder(1, '設定中心', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))
    }
    .onChange((index: number) => {
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

在這個示例中，我們使用@State屬性selectedIndex來儲存當前啟用的標籤頁索引，並在onChange事件中更新這個索引。

特殊形狀的Tab

示例6：新增特殊形狀的Tab

@Entry
@Component
struct Index {
  @State selectedIndex: number = 0

  @Builder
  myBuilder(itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  @Builder
  centerBuilder() {
    Image($r('app.media.ic_special_icon'))
      .width(40)
      .margin({ bottom: 10 })
  }

  build() {
    Tabs()
    {
      TabContent() {
        Text('首頁內容')
      }
      .tabBar(this.myBuilder(0, '首頁', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected')))

      TabContent() {
        Text('分類內容')
      }
      .tabBar(this.myBuilder(1, '分類', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))

      TabContent() {
        Text('活動內容')
      }
      .tabBar(this.centerBuilder())

      TabContent() {
        Text('購物車內容')
      }
      .tabBar(this.myBuilder(3, '購物車', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('個人中心內容')
      }
      .tabBar(this.myBuilder(4, '個人中心', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index: number) => {
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

在這個示例中，我們新增了一個特殊形狀的標籤頁，並使用centerBuilder函式來自定義其樣式。

結語

透過本文的詳細介紹和示例，你應該能夠掌握Tabs元件的基本使用、自定義樣式以及狀態管理。這些技能對於開發具有豐富標籤頁功能的鴻蒙應用至關重要。如果你有任何問題或想要進一步討論，歡迎在評論區留下你的想法。

以上就是一篇關於華為鴻蒙開發中Tabs元件的詳細教程。希望這篇文章能幫助你更好地理解和使用華為鴻蒙開發中的Tabs元件。如果你在使用 DevEco Studio 進行開發時遇到任何問題，歡迎交流討論。

相關文章