【Flutter】微信项目实战【06】通讯录界面搭建(中)

//model
class Friends {
  final String? imageUrl;//图片 URL
  final String? name;//好友名称
  final String? indexLetter;//索引字母(组头)
  final String? imageAssets;//图片
  //构造方法
  Friends({this.imageUrl,this.name,this.indexLetter,this.imageAssets});
}

//好友列表
List <Friends>datas =
[
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
      name: '菲儿',
      indexLetter: 'F'
  ),

............省略............

]

上篇文章显示了头部 4 个固定的cell，现在要显示下面的列表了，先来添加一下列表的数据源。

late final List<Friends> _listDatas = [];//列表数据

  @override
  void initState(){
    super.initState();
    //创建数据
    // _listDatas.addAll(datas);
    // _listDatas.addAll(datas);
    _listDatas..addAll(datas)..addAll(datas)..addAll(datas);//数据
    print(_listDatas);
  }

为了数据的能够多一点，我们这里把一份数据，多次添加以达到数据多的目的。一次添是_listDatas.addAll(datas)，多次添加可以使用..来表示，这是一种语法格式。

数据有了，那么列表的显示部分代码也得改成下面这种了。

2.2 列表显示逻辑

列表数据个数

列表的数据个数就是头部的数据个数加上列表的数据之和。

cell 显示的逻辑

列表 cell的显示得作判断，小于 4 个也就是 0~3 的是头部，显示本地图片数据(_headerData)，其他的都是列表的数据了。列表的数据是 index 从 5 开始的，所以要减去头部的数据个数。

显示效果

2.3 分组处理

组头和列表是一起的，使用上下结构用Column 来布局，结构如下：

组头和列表结构

组头

Container(
          height: 30,
          color: GlobalThemeColor,
        )

现在组头已经有了，那么现在要显示组头的数据，在_itemForRow方法里面写上如下代码：

groupTitle: _listDatas[index-4].indexLetter,

还需要在 cell 里面做一下处理，如下：

组头方法

组头显示效果

组头 title 显示

2.4 组头合并处理

现在是每一个 cell 都有一个组头，我们现在要把它们合并在一起，到达分组的效果，改怎么做呢？

合并的思路是：第一个 cell 肯定要有组头的显示，那么第二个以后的 cell 就不显示。那么得先把数据进行排序处理，如下：


    //排序
    _listDatas.sort((Friends a,Friends b){
      return a.indexLetter!.compareTo(b.indexLetter!);
    });

数据排序好了，现在来看看排序后的效果，如下图所示：

数据排序

组合并处理

组头标题处理

分组效果

分组效果

以上全部内容就是通讯录界面的列表部分的实现分析和代码实现了。

感兴趣的小伙伴自己动手实操一下吧！GitHub项目地址

下一篇文章将重点讲解索引条的实现，这个就比较费劲一点了。大家可以提前自己思考一下，该如何去实现呢！

3. 写在后面

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

【Flutter】微信项目实战【06】 通讯录界面搭建(中)

1. 写在前面

2. 通讯录列表

2.1 建立模型

2.2 列表显示逻辑

2.3 分组处理

2.4 组头合并处理

3. 写在后面

【Flutter】微信项目实战【06】通讯录界面搭建(中)