「这是我参加11月更文应战的第15天，活动概况检查：2021最终一次更文应战」

在上一篇文章中，咱们现已完成了通讯录界面的初步效果，今日咱们来给联系人列表分组；

联系人列表分组

在进行分组摆放之前，咱们要首先知道每一个联系人名字的首字母，这个数据，咱们现已在数据模型中给出了界说：

  Person(
      imageURL: 'https://www.6hu.cc/wp-content/uploads/2022/12/1670789167-ca11a3bcf02f9fd.jpg',
      name: '法外狂徒',
      indexLetter: 'F'),

其间的indexLetter就是首字母拼音的大写方式；这样的话，咱们就需要针对_ContactsCell的联系人部分的传值进行修正：

将indexLetter传递给_ContactsCell的groupTitle用来显现分组的文本信息；

在_ContactsCell中显现分组文本信息的逻辑如下：

分组文本显现情况由groupTitle来控制，如果groupTitle为空，则回来一个空的Text，否则回来Text显现分组文本；其高度也会根据groupTitle进行改动；

因为是自适应布局，所以第一个红框中的高度设置其实是能够不用的；

因为咱们之前给整个_ContactsCell的Container设置了padding(内边距)，所以此刻显现上并不完善，咱们将内边距，改为图标所在的Row的外边距：

在initState中增加数据源

因为咱们在处理数据的过程中，很可能是经过分页处理来获取多次，那么这几个数据源，那么咱们有没有办法给多个数据源合并在一起呢？

咱们创立一个新的List：

final List<Person> _listDatas = [];

咱们这里模拟将多个datas中的元素都放进_listDatas中，这个时候，咱们就需要用到一个生命周期的函数：

@override
  void initState() {
    super.initState();
  }

这个函数会在_ContactsPageState被创立时调用；所以此刻需要切换出当时页面，然后再从头切换回来才能显现效果；

其间的：

_listDatas..addAll(datas)..addAll(datas);

是一个链式表达，其等同于：

_listDatas.addAll(datas);
_listDatas.addAll(datas);

数据源排序

咱们现已增加了很多联系人信息，那么如果给这么联系人进行排序呢？

在List中，有一个排序算法sort：

void sort([int compare(E a, E b)?]);

在这个办法中，将会比较a和b两个元素，完成如下：

  @override
  void initState() {
    super.initState();
    _listDatas..addAll(datas)..addAll(datas);
    // 数组排序
    _listDatas.sort((Person a, Person b) {
      return a.indexLetter!.compareTo(b.indexLetter!);
    });
  }

咱们能够看到，联系人列表现已按照首字母次序排序了；

头部分组显现躲藏

咱们现已显现出了分组的头部分组字母，但是很明显，相邻的两个如果首字母一样的话，那么第二个应该是不显现首字母的，所以咱们应该判别：如果当时数据首字母与上一条数据的首字母相一起，当时数据不显现首字母分组；

bool isHideIndex = (index > _headerList.length) &&
        _listDatas[index - _headerList.length].indexLetter == _listDatas[index - _headerList.length - 1].indexLetter;

最终，_itemForRow办法完成修正为：

此刻列表显现效果如下：