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

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

联系人列表分组

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

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

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

Flutter(十七)实战-通讯录分组
indexLetter传递给_ContactsCellgroupTitle用来显现分组的文本信息;

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

Flutter(十七)实战-通讯录分组
分组文本显现情况由groupTitle来控制,如果groupTitle为空,则回来一个空的Text,否则回来Text显现分组文本;其高度也会根据groupTitle进行改动;

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

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

Flutter(十七)实战-通讯录分组

在initState中增加数据源

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

咱们创立一个新的List

final List<Person> _listDatas = [];

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

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

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

Flutter(十七)实战-通讯录分组
其间的:

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

是一个链式表达,其等同于:

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

数据源排序

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

List中,有一个排序算法sort

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

在这个办法中,将会比较ab两个元素,完成如下:

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

Flutter(十七)实战-通讯录分组
咱们能够看到,联系人列表现已按照首字母次序排序了;

头部分组显现躲藏

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

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

最终,_itemForRow办法完成修正为:

Flutter(十七)实战-通讯录分组
此刻列表显现效果如下:

Flutter(十七)实战-通讯录分组