鴻蒙(Harmony) NEXT 9月份就要正式上架了，并且不會(huì)再兼容安卓平臺(tái)，于是我也趕緊給App開(kāi)發(fā)鴻蒙版本，接下來(lái)會(huì)寫(xiě)一系列的Harmony開(kāi)發(fā)教程。

今天使用AlphabetIndexer實(shí)現(xiàn)聯(lián)系人字母索引，AlphabetIndexer是官方封裝好的組件

咱們實(shí)現(xiàn)后的效果圖：

代碼實(shí)現(xiàn)

首先在aboutToAppear方法中初始化數(shù)據(jù)，aboutToAppear方法相當(dāng)于安卓開(kāi)發(fā)中Activity的onCreate，遍歷字符串列表，使用pinyin-pro框架轉(zhuǎn)成拼音，再截取首字母轉(zhuǎn)成大寫(xiě)，最后對(duì)數(shù)組進(jìn)行排序，規(guī)則是：A-Z-#

initData(){
    const nameList = ["白虎","白天","白癡","常羲","嫦娥",
        "二郎神","伏羲","觀世音","精衛(wèi)","夸父","789范德薩范德薩","女?huà)z","哪吒",
        "盤(pán)古","青龍","如來(lái)","孫悟空","沙僧","順風(fēng)耳","太白金星","太上老君","羲和","玄武",
        "豬八戒","朱雀","祝融","Abbey","Steven","Elizabeth","しんのすけ"];

    for(let i=0;i<nameList.length;i++){
        let pinyinStr=pinyin(nameList[i], { toneType: "none" });//根據(jù)姓名獲取拼音
        let index=pinyinStr.substring(0,1).toUpperCase();// 獲取拼音首字母并轉(zhuǎn)成大寫(xiě)
        if (!/^[A-Z]$/.test(index)) { // 如果不在A-Z中則默認(rèn)為“#”
            index = "#";
        }
        console.log(nameList[i]+" index:"+index)
        this.list.push(new Contact(index, nameList[i]));
    }

    this.list.sort((a, b) => {
        if (a.index === b.index) {
            return a.name.localeCompare(b.name);
        }
        if (a.index === "#") {
            return 1;
        }
        if (b.index === "#") {
            return -1;
        }
        return a.index.localeCompare(b.index);
    });
}

數(shù)據(jù)準(zhǔn)備好了，接下來(lái)如何展示在界面上，ArkTS UI非常簡(jiǎn)單，不像安卓要寫(xiě)適配器、IOS要寫(xiě)Cell，@Component組件必須要重寫(xiě)build方法，在build方法中實(shí)現(xiàn)界面邏輯，首先最外層使用Row容器組件，一行顯示，

• 左邊使用List組件加載列表，在循環(huán)列表中通過(guò)if判斷是否顯示字母
• 右邊使用AlphabetIndexer組件展示26個(gè)字母，實(shí)現(xiàn)onSelect方法，用戶(hù)選中字母會(huì)回調(diào)這個(gè)方法

build() {
    Row() {
        List({ space: 0, initialIndex: 0,scroller:this.scroller}){//加載列表
            ForEach(this.list, (item:Contact,index) => {
                ListItem() {
                    Column(){
                        if (index==0||this.list[index-1].index != item.index){
                            Text(item.index).width('100%').fontColor('#333333').fontSize(14).backgroundColor("#EAEAEA").padding({
                                top:5,bottom:5,left:15
                            })
                        }

                        Text(item.name)
                            .fontSize(30)
                            .padding({
                                top:15,bottom:15,left:15
                            })
                    }.alignItems(HorizontalAlign.Start)
                }
            }, (item:Contact) => util.generateRandomUUID(true))//key隨機(jī)生成
        }.layoutWeight(1).scrollBar(BarState.Off)
        .height('100%').divider({
            color:'#E5E5E5',
            strokeWidth:0.5
        })

        AlphabetIndexer({ arrayValue: this.value, selected: 0})
            .selectedColor(0xFFFFFF) // 選中項(xiàng)文本顏色
            .popupColor(0xFFFAF0) // 彈出框文本顏色
            .selectedBackgroundColor(0xCCCCCC) // 選中項(xiàng)背景顏色
            .popupBackground(0xD2B48C) // 彈出框背景顏色
            .usingPopup(false) // 是否顯示彈出框
            .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 選中項(xiàng)字體樣式
            .popupFont({ size: 30, weight: FontWeight.Bolder }) // 彈出框內(nèi)容的字體樣式
            .itemSize(22) // 每一項(xiàng)的尺寸大小
            .alignStyle(IndexerAlign.Left) //彈出框在索引條右側(cè)彈出
            .onSelect((index: number) => {
                console.info(this.value[index] + ' Selected!')
                this.onSelectIndexItem(this.value[index]);
            })
    }
    .width('100%')
    .height('100%')
}

當(dāng)用戶(hù)選中某個(gè)字母時(shí)，循環(huán)遍歷索引位置，通過(guò)scroller滾動(dòng)到指定位置

onSelectIndexItem(index:string){
    for (let i=0;i<this.list.length;i++){
        console.log("名字："+this.list[i].name+" index1:"+this.list[i].index+" index2:"+index)
        if (this.list[i].index == index){
            this.scroller.scrollToIndex(i)//滾動(dòng)到索引位置
            break ;
        }
    }
}

AlphabetIndexer還可以通過(guò)usingPopup設(shè)置是否使用提示彈窗，大家可以自己去看API文檔。如果是安卓開(kāi)發(fā)，實(shí)現(xiàn)這個(gè)功能代碼還是蠻多的，鴻蒙100行代碼就能實(shí)現(xiàn)這個(gè)功能了。

源碼下載

源碼:

https://github.com/ansen666/AlphabetIndexer

AlphabetIndexer組件API官方文檔:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-container-alphabet-indexer-0000001427744828-V2

pinyin-pro框架:

https://ohpm.openharmony.cn/#/cn/detail/pinyin-pro

如果你想第一時(shí)間看我的后期文章，掃碼關(guān)注公眾號(hào)

      安輝編程筆記 - 開(kāi)發(fā)技術(shù)分享
             掃描二維碼加關(guān)注