【Flutter】微信项目实战【06】 通讯录界面搭建(中)
1. 写在前面
在上篇文章中已经对微信发现界面进行了界面的布局搭建代码实现，那么今天就继续来写微信实战项目的通讯录界面！
GitHub项目地址
2. 通讯录列表
通讯录列表的 cell 这里就不过多讲解了，在上篇文章中已经介绍过了。
我们现在要展示列表的数据，得先把数据的结构定义出来，我们新建一个数据文件，取名friends_data.dart，里面包括图片 URL、好友的昵称、索引字母(组头)、图片(本地)，还有模型的构造方法，好友列表的数据！
2.1 建立模型
//model
class Friends {final String? imageUrl;//图片 URLfinal 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 = [];//列表数据@overridevoid initState(){super.initState();//创建数据// _listDatas.addAll(datas);// _listDatas.addAll(datas);_listDatas..addAll(datas)..addAll(datas)..addAll(datas);//数据print(_listDatas);}
为了数据的能够多一点，我们这里把一份数据，多次添加以达到数据多的目的。一次添是_listDatas.addAll(datas)，多次添加可以使用..来表示，这是一种语法格式。
数据有了，那么列表的显示部分代码也得改成下面这种了。
2.2 列表显示逻辑
列表的数据个数就是头部的数据个数加上列表的数据之和。
列表 cell的显示得作判断，小于 4 个也就是 0~3 的是头部，显示本地图片数据(_headerData)，其他的都是列表的数据了。列表的数据是 index 从 5 开始的，所以要减去头部的数据个数。
2.3 分组处理
组头和列表是一起的，使用上下结构用Column 来布局，结构如下：
- 组头
Container(height: 30,color: GlobalThemeColor,)
现在组头已经有了，那么现在要显示组头的数据，在
_itemForRow方法里面写上如下代码：
groupTitle: _listDatas[index-4].indexLetter,还需要在 cell 里面做一下处理，如下：
- 组头显示效果
2.4 组头合并处理
现在是每一个 cell 都有一个组头，我们现在要把它们合并在一起，到达分组的效果，改怎么做呢？
合并的思路是：第一个 cell 肯定要有组头的显示，那么第二个以后的 cell 就不显示。那么得先把数据进行排序处理，如下：
//排序_listDatas.sort((Friends a,Friends b){return a.indexLetter!.compareTo(b.indexLetter!);});
数据排序好了，现在来看看排序后的效果，如下图所示：
- 组合并处理
- 分组效果
以上全部内容就是通讯录界面的列表部分的实现分析和代码实现了。
感兴趣的小伙伴自己动手实操一下吧！GitHub项目地址
下一篇文章将重点讲解索引条的实现，这个就比较费劲一点了。大家可以提前自己思考一下，该如何去实现呢！
3. 写在后面
关注我，更多内容持续输出
CSDN
掘金
简书
[基础组件合集]
【Flutter】基础组件【01】Text
【Flutter】基础组件【02】Container
【Flutter】基础组件【03】Scaffold
【Flutter】基础组件【04】Row/Column
【Flutter】基础组件【05】Icon
【Flutter】基础组件【06】Image
【Flutter】基础组件【07】Appbar
【Flutter】基础组件【08】BottomNavigationBar
【Flutter】基础组件【09】Button
- [项目实战合集]
【Flutter】微信项目实战【01】基本框架搭建
【Flutter】微信项目实战【02】我的界面搭建(上)
【Flutter】微信项目实战【03】我的界面搭建(下)
【Flutter】微信项目实战【04】发现界面搭建
【Flutter】微信项目实战【05】 通讯录界面搭建(上)
【Flutter】微信项目实战【06】 通讯录界面搭建(中)相关推荐
- linux mysql 实战_Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06
Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06 视频教程学习地址 Oracle/MySQL数据库学习专用QQ群:336282998.189070296 学完风哥本课程能熟悉 ...
- Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目 源码(欢迎star): 前端项目代码 后端项目代码 系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
- Flutter商城项目实战(商品分类)
Flutter是Google(全球顶级互联网科技公司)的生的,后台够硬,毫无疑问Flutter即将或已经成为跨平台开发的主流,Flutter野心很大,不仅冲击着原生开发,而且很有可能会烧到Web前端. ...
- 【SSH网上商城项目实战】之环境搭建填坑
此篇主要是记录我在从零开始走一遍倪升武大神的[SSH网上商城项目实战]过程中遇到的一些坑并记录解决方法.关于这个项目,大家可以去倪升武的博客学习了解,SSH网上商城项目实战请戳倪升武的项目实战专题. ...
- .net core项目实战之开发环境搭建
在上一篇[.net core项目实战之回顾总结]主要介绍了项目背景和自己的一些想法,从本篇开始正式叙述整个开发过程,本篇主要介绍一下开发前的环境准备,vs2017和docker的安装与配置 系统要求 ...
- Flutter企业级项目实战——博时App
| 前言 在当前大前端愈演愈烈的情况下,前有大名鼎鼎的QT.Facebook的RN.阿里的Weex,后有不断追赶的Flutter及原生+H5混合开发,大家都想要在跨平台这碗饭上夺取饭碗.在这种趋势下, ...
- 08_EMS项目之需求分析与界面搭建
文章目录 EMS企业员工管理系统 EMS界面环境搭建 EMS显示已有的员工信息 博文配套视频课程:24小时实现从零到AI人工智能 EMS企业员工管理系统 通过一个系统级别的案例,把之前所学习的知识点条 ...
- vue.js+koa2项目实战（四）搭建koa2服务端
搭建koa2服务端 安装两个版本的koa 一.版本安装 1.安装 koa1 npm install koa -g 注:必须安装到全局 2.安装 koa2 npm install koa@2 -g 二. ...
- iWebShop 电商项目实战001----测试环境搭建（上）
WAMP环境搭建 一.简要说明 WAMP: windows + apache + mysql + php 二.配置清单 Windows 10 专业版 Xampp 7.4.5 iWebshop 5.8 ...
- 从零开始Vue项目实战（二）-搭建环境
1.下载node.js并安装 下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...
最新文章
- Nature子刊：吃得越少，活得越久
- 模拟电路技术之基础知识（七）
- linux如何扩展根分区,linux扩展根分区详细步骤
- C++主题年技巧积累#1——UltraEdit的代码美化
- Python之Django框架开发博客
- 数据库每日一题 2020.05.09
- [Git] Ubuntu 上更新 git
- mysql密码输入多次都不对_mysql 密码不对
- +0.5（加0.5）配合int()实现四舍五入
- log4j配置文件配置及解读
- ERROR ITMS-4238
- Excel怎么在数据中间隔插入指定行
- 百度paddlepaddle入门讲解第一周内容
- 程序员 薪水_如何减少程序员的薪水
- 360极速浏览器显示密码
- 安全合规/GDPR--15--通用数据保护条例-目录索引
- Google Earth Engine——MERRA-2 M2T1NXAER：1980-2022年气溶胶逐日数据集
- easyexcel处理合并单元格数据
- OpenGL（十三） 天空盒 的 shader 实现
- 液晶显示屏LCD1602
热门文章