HarmonyOS NEXT應用開發—城市選擇案例

生活就是这么怪發表於2024-04-23

介紹

本示例介紹城市選擇場景的使用：透過AlphabetIndexer實現首字母快速定位城市的索引條導航。

效果圖預覽

image

使用說明

分兩個功能

  • 在搜尋框中可以根據城市拼音模糊搜尋出相近的城市，例如輸入"a"，會出現"阿爾山"、"阿勒泰地區"、"安慶"、"安陽"。
  • 下方城市列表透過AlphabetIndexer元件實現拼音索引條，透過滑動選擇城市首拼，快速定位相關首拼城市。

實現思路

場景：透過AlphabetIndexer實現索引條導航

城市列表中的右側首拼索引條，透過AlphabetIndexer元件實現首字母快速定位城市的索引條導航。

  • 透過AlphabetIndexer的selected屬性與城市列表中List元件onScrollIndex事件繫結，原始碼參考
AlphabetIndexer({ arrayValue: TAB_VALUE, selected: this.stabIndex })
  .height('100%')
  .selectedColor($r('app.color.alphabet_select_color')) // 選中項文字顏色
  .popupColor($r('app.color.alphabet_pop_color')) // 彈出框文字顏色
  .selectedBackgroundColor($r('app.color.alphabet_selected_bgc')) // 選中項背景顏色
  .popupBackground($r('app.color.alphabet_pop_bgc')) // 彈出框背景顏色
  .popupPosition({ x: $r('app.integer.pop_position_x'), y: $r('app.integer.pop_position_y') })
  .usingPopup(true) // 是否顯示彈出框
  .selectedFont({ size: $r('app.integer.select_font'), weight: FontWeight.Bolder }) // 選中項字型樣式
  .popupFont({ size: $r('app.integer.pop_font'), weight: FontWeight.Bolder }) // 彈出框內容的字型樣式
  .alignStyle(IndexerAlign.Right) // 彈出框在索引條左側彈出
  .onSelect((tabIndex: number) => {
    this.scroller.scrollToIndex(tabIndex);
  })
  • 當使用者滑動List元件，list元件onScrollIndex監聽到firstIndex的改變，繫結賦值給AlphabetIndexer的selected屬性，從而定位到字母索引。
  • 當點選AlphabetIndexer的字母索引時，透過scrollToIndex觸發list元件滑動並指定firstIndex，從而實現List列表與AlphabetIndexer元件首字母聯動吸頂展示，原始碼參考。
List({ space: 14, initialIndex: 0, scroller: this.scroller }) {
  .onScrollIndex((firstIndex: number, lastIndex: number) => {
     this.stabIndex = firstIndex;
  })
}

高效能知識點

由於需要透過搜尋按鈕頻繁的控制自定義元件的顯隱狀態，原始碼詳見，因此推薦使用顯隱控制替代條件渲染，參考合理選擇條件渲染和顯隱控制文章。

工程結構&模組型別

citysearch                                      // har型別
|---src/main/ets/view
|   |---CitySearch.ets                          // 檢視層-主頁 
|   |---CityView.ets                            // 檢視層-城市列表元件
|   |---SearchView.ets                          // 檢視層-搜尋元件
|---src/main/ets/model
|   |---DetailData.ets                          // 模型層-資料模組

模組依賴

依賴har包-common庫中UX標準

參考資料

AlphabetIndexer參考文件

寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 想要獲取更多完整鴻蒙最新VIP學習資源，請移步前往小編：https://qr21.cn/FV7h05

相關文章