鸿蒙ArkTS+ArkUI仿微信通讯录页面制作【1】

先看效果图

这个页面的核心问题在于右边的字母索引功能的实现，右边这个组件AlphabetIndexer，说实话我觉得这是文档的一个bug，完全没有给他命名，如果要搜都不知道怎么去搜，他是在ArkUI文档的信息展示里的第一个（因为按字母排序），官方的描述是“可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。”，这么去描述倒是也没问题……但是我真的为了找这个组件翻了很久的文档。

首先我们还是先通过interface来定义数据的规范，在model文件夹里创建一个_Contact.ets文件，通过观察页面可以看到，我们这里并没有用联系人的头像，而是用了每个联系的第一个字。具体分组的时候，是按照第一个字的首字母分组，然后每个组里就是对应的人名。所以这个数据规范的话，首先是一个组名（按照A-Z的字符串），然后是一个全是姓名也就是字符串的数组，对应的代码如下：

export interface Contact{
  group:string;
  namesList:string[];
}

然后data文件夹里创建一个_Contact.ets用来放置测试用的模拟数据，这个页面也要先从modal里import对应的数据规范，具体代码如下

import {Contact} from '../model/_Contact'
export const contactListArr:Contact[] = [
  {group:'A',namesList:['A1','A','爱','A麦子','安琪','A2']},
  {group:'B',namesList:['白白','冰蓝']},
  {group:'C',namesList:['晨曦','赤焰','初雪','苍月','彩蝶']},
  {group:'D',namesList:['黛玉','丹青','冬阳','独舞','断桥']},
  {group:'E',namesList:['恩熙','风铃','飞鸿','梵音','繁星']},
];

以上代码只写了部分的测试数据，只是从A-E，那么实际项目中，我们其实还需要对从后端获取的数据进行处理、分组。因为你在保存用户数据的时候，不可能让用户自己去输入自己的第一个字的首字母的，没有哪个项目是这么做的。如何获取第一个字的首字母，后面我会单独出一个三方库来演示实现。

然后我们去做这个页面 首先是通过import，把前面设置好的数据规范和测试数据import进来，并进行赋值 代码如下：

import {Contact} from '../model/_Contact'
import {contactListArr} from '../data/_Contact'
contactListArr:Contact[] = contactListArr

然后定义一下字母列表，即有哪些字母

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'];

接着定义一下控制器，因为点击右边的AlphabetIndexer组件后，左边的列表会同步滚动到对应字母的组的位置，所以对于List组件是要加一个控制器的，代码如下：

scroller:Scroller = new Scroller();

再然后，我们可以看到，每个名字前面都有一个圆形，里面显示的是姓名的第一个字，这里不是简单的[0]去获取第一个字符，因为如果是字母的话，是有可能为小写的，如果是小写的字母，就要转成大写字母来显示，如果直接[0]的话，是没办法区分中文英文的，就做不到这个小写字母转大写的操作，这里的话，是用charAt……那为什么用charAt不用[0]呢……因为万一有的人的名字是空呢……charAt还能返回空，[0]就直接undefined了……再通过正则判断是不是英文，是的话转大写，具体代码如下：

getInitial(name:string):string{
    if (name.length === 0) return '';
    const firstChar = name.charAt(0);
    if (/[a-zA-Z]/.test(firstChar)) {
      return firstChar.toUpperCase();
    }
    return firstChar;
  }

…… 后续代码请看下一篇