ArkUI（TS）聲明式開(kāi)發(fā)：列表字母索引導(dǎo)航

// 堆疊容器，方向居右
Stack({ alignContent: Alignment.End }) {
   // 列表布局   
   Column() {
        List() {
          ......
        }
   }.width('100%')
   .height('100%')
       
   // 字母索引導(dǎo)航
   AlphabetIndexer()
}

2、列表數(shù)據(jù)格式。

[
    { name: '周杰倫', headerWord: 'Z' },
    { name: '林俊杰', headerWord: 'L' },
    { name: '陳奕迅', headerWord: 'C' },
    { name: '薛之謙', headerWord: 'X' },
    ......
]

3、列表布局。

這塊需要注意的是，分組效果：相同字母只顯示一個(gè)就行。

// 列表數(shù)據(jù)
private listContacts: Array<Contacts> = getContactsList()
// 滾動(dòng)控制器
private scroller: Scroller = new Scroller()
List({ scroller: this.scroller }) {
  ForEach(this.listContacts, (item: Contacts, index) => {
    ListItem() {
      Column() {
        // 字母布局
        if (index == 0) {
          // 第一個(gè)肯定要顯示
          this.HeaderWord(item)
        } else {
          // 當(dāng)前字母和前一個(gè)不一樣就顯示 
          if (item.headerWord != this.listContacts[index-1].headerWord) {
            this.HeaderWord(item)
          }
        }
        // 聯(lián)系人內(nèi)容布局
        this.ContactsContentLayout(item)
      }
    }
  }, (item, index) => index.toString())
}

4、字母索引導(dǎo)航。

（1）獲取列表中字母和索引的對(duì)應(yīng)的map集合，和列表字母布局顯示條件是相同的。

  let mapAlphabetsIndex: Map<string, number> = new Map()
  for (var i = 0; i < list.length; i++) {
    const element = list[i];
    // 第一個(gè)肯定要添加到map中
    if (i == 0) {
      mapAlphabetsIndex.set(element.headerWord,i)
    } else {
      // 當(dāng)前字母和前一個(gè)不一樣，添加到map中
      if (element.headerWord != list[i-1].headerWord) {
        mapAlphabetsIndex.set(element.headerWord,i)
      }
    }
  }

（2）根據(jù)字母索引組件選中回調(diào)事件，獲取字母對(duì)應(yīng)的索引，進(jìn)行跳轉(zhuǎn)就行。

private alphabets: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
@State private selectedIndex: number = 0
// 字母索引導(dǎo)航
AlphabetIndexer({ arrayValue: this.alphabets, selected: this.selectedIndex })
  .onSelected((index: number) => {// 選中事件回調(diào)
    // 選中的字母
    const alphabet = this.alphabets[index]
    // 查詢字母在列表中的索引
    const selectedIndex = this.mapAlphabetsIndex.get(alphabet);
    // 跳轉(zhuǎn)到指定索引位置
    this.scroller.scrollToIndex(selectedIndex)
  })

5、列表滑動(dòng)選中字母。

List({ scroller: this.scroller }) {
      ......   
}
.onScrollIndex((start, end) => {
  // 監(jiān)聽(tīng)滑動(dòng)時(shí)頂部的索引，查詢對(duì)應(yīng)的數(shù)據(jù)
  const element = this.listContacts[start]
  // 更新選中的字母索引
  this.selectedIndex = this.alphabets.indexOf(element.headerWord)
})

項(xiàng)目地址

項(xiàng)目加了個(gè)漢字轉(zhuǎn)拼音的工具類。

https://gitee.com/liangdidi/AlphabetIndexerDemo.git(需要登錄才能看到演示圖)

總結(jié)

此項(xiàng)目經(jīng)典的使用場(chǎng)景就是聯(lián)系人，實(shí)現(xiàn)過(guò)程需要注意：

數(shù)據(jù)源使用拼音工具類獲取大寫(xiě)首字母，并進(jìn)行列表排序。
字母布局的顯示條件，相同字母只顯示一個(gè)。
首字母與其索引初始化時(shí)存入map中，AlphabetIndexer組件在onSelected回調(diào)中獲取字母對(duì)應(yīng)的索引，滑動(dòng)到指定的列表位置。
List組件在onScrollIndex回調(diào)中監(jiān)聽(tīng)滑動(dòng)到當(dāng)前頂部的索引，更新選中的字母索引。

每天進(jìn)步一點(diǎn)點(diǎn)、需要付出努力億點(diǎn)點(diǎn)。

??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://ost.51cto.com??