从零开始Flutter版微信APP--聊天页之ListView

以下为授权转载的一盎司科技公众号文章

---

接下来介绍聊天页面，这里主要展示一个列表，每个子项包含头部图标，正文，副标题以及尾部时间展示等。这里主要使用ListView控件，包括子项ListTile控件。

示例代码地址：

GitHub地址：https://github.com/iounce/flutter-wechat

Gitee地址：https://gitee.com/iounce_admin/flutter-wechat

环境

• Windows操作系统：Windows10（21H2，19044.1766）

• Android Studio：Giraffe 2022.3.1 Patch 2

• Flutter: 3.13.0

• Dart: 3.1.0

• get: 4.6.6

添加controller文件

添加controller文件，用于绑定列表数据源，这里简单处理，固定为字符串，可以改造为一个类，用于完整标识列表子项的数据。

修改WechatPage页

在WechatPage页面的build函数中，添加返回ListView的处理，这里调用ListView.separated()函数来构造ListView，其中separatorBuilder属性增加分隔符Divider()，itemCount属性指定列表子项数目，itemBuilder属性用于构建列表子项。子项采用ListTile控件来实现，包含标题，副标题，前后图标等。

这里一般控件会有颜色color属性，可以直接使用预定的Colors类中预设值的Material Color，对于文本则需要使用style属性来设置颜色。另外图标控件Icon可以使用预设值的Material Icon，也非常方便。

效果图

这里简单固定模拟参数，后续可以考虑改为动态获取。

flutter5

跨平台8

app16

flutter · 目录

上一篇从零开始Flutter版微信APP--主页之BottomNavigationBar下一篇从零开始Flutter版微信APP--通讯录页之AzListView