鸿蒙(Harmony) NEXT - AlphabetIndexer实现联系人字母索引

鸿蒙(Harmony) NEXT 9月份就要正式上架了,并且不会再兼容安卓平台,于是我也赶紧给App开发鸿蒙版本,接下来会写一系列的Harmony开发教程。

今天使用AlphabetIndexer实现联系人字母索引,AlphabetIndexer是官方封装好的组件

咱们实现后的效果图:

代码实现

首先在aboutToAppear方法中初始化数据,aboutToAppear方法相当于安卓开发中Activity的onCreate,遍历字符串列表,使用pinyin-pro框架转成拼音,再截取首字母转成大写,最后对数组进行排序,规则是:A-Z-#

initData(){
    const nameList = ["白虎","白天","白痴","常羲","嫦娥",
        "二郎神","伏羲","观世音","精卫","夸父","789范德萨范德萨","女娲","哪吒",
        "盘古","青龙","如来","孙悟空","沙僧","顺风耳","太白金星","太上老君","羲和","玄武",
        "猪八戒","朱雀","祝融","Abbey","Steven","Elizabeth","しんのすけ"];

    for(let i=0;i<nameList.length;i++){
        let pinyinStr=pinyin(nameList[i], { toneType: "none" });//根据姓名获取拼音
        let index=pinyinStr.substring(0,1).toUpperCase();// 获取拼音首字母并转成大写
        if (!/^[A-Z]$/.test(index)) { // 如果不在A-Z中则默认为“#”
            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);
    });
}

数据准备好了,接下来如何展示在界面上,ArkTS UI非常简单,不像安卓要写适配器、IOS要写Cell,@Component组件必须要重写build方法,在build方法中实现界面逻辑,首先最外层使用Row容器组件,一行显示,

  • 左边使用List组件加载列表,在循环列表中通过if判断是否显示字母
  • 右边使用AlphabetIndexer组件展示26个字母,实现onSelect方法,用户选中字母会回调这个方法
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随机生成
        }.layoutWeight(1).scrollBar(BarState.Off)
        .height('100%').divider({
            color:'#E5E5E5',
            strokeWidth:0.5
        })

        AlphabetIndexer({ arrayValue: this.value, selected: 0})
            .selectedColor(0xFFFFFF) // 选中项文本颜色
            .popupColor(0xFFFAF0) // 弹出框文本颜色
            .selectedBackgroundColor(0xCCCCCC) // 选中项背景颜色
            .popupBackground(0xD2B48C) // 弹出框背景颜色
            .usingPopup(false) // 是否显示弹出框
            .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中项字体样式
            .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
            .itemSize(22) // 每一项的尺寸大小
            .alignStyle(IndexerAlign.Left) //弹出框在索引条右侧弹出
            .onSelect((index: number) => {
                console.info(this.value[index] + ' Selected!')
                this.onSelectIndexItem(this.value[index]);
            })
    }
    .width('100%')
    .height('100%')
}

当用户选中某个字母时,循环遍历索引位置,通过scroller滚动到指定位置

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)//滚动到索引位置
            break ;
        }
    }
}

AlphabetIndexer还可以通过usingPopup设置是否使用提示弹窗,大家可以自己去看API文档。如果是安卓开发,实现这个功能代码还是蛮多的,鸿蒙100行代码就能实现这个功能了。

源码下载

源码:

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

如果你想第一时间看我的后期文章,扫码关注公众号

      安辉编程笔记 - 开发技术分享
             扫描二维码加关注

热门相关:重生童养媳:枭宠不乖娇妻   我的女友是丧尸   凤惊天之狂妃难求   伏天剑尊   宠妻入骨:神秘老公有点坏