「这是我参加11月更文应战的第15天,活动概况检查:2021最终一次更文应战」
在上一篇文章中,咱们现已完成了通讯录界面的初步效果,今日咱们来给联系人列表分组;
联系人列表分组
在进行分组摆放之前,咱们要首先知道每一个联系人名字的首字母,这个数据,咱们现已在数据模型中给出了界说:
Person(
imageURL: 'https://www.6hu.cc/storage/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);
数据源排序
咱们现已增加了很多联系人信息,那么如果给这么联系人进行排序呢?
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
办法完成修正为:
此刻列表显现效果如下: