从零开始Flutter版微信APP--通讯录页之AzListView

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

---

接下来介绍通讯录页面，这里主要展示一个联系人列表，每个子项包含头部图标，正文等，右侧会有字母顺序列用于定位联系人。这里主要使用第三方开源的AzListView控件，完整实现了类微信的通讯录。以下简单介绍这个控件的使用。

示例代码地址：

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

添加AzListView库

在pubspec.yaml配置文件，增加AzListView库(https://github.com/flutterchina/azlistview)的最新版本2.0.0及拼音处理库lpinyin的最新版本2.0.2。

添加controller文件

添加controller文件，增加默认的最开始固定项目topList，然后加载本地json文件的默认联系人信息，然后将连着添加到联系人列表contactList，并按照首字母排序。

修改ContactPage页

在build函数添加具体界面实现细节，先添加AzListView控件，然后实现各个属性，具体需要参考控制属性说明，可参考其示例项目代码。

这里会有很多辅助函数的处理，具体可参考AzListView官方文档(https://github.com/flutterchina/azlistview)。这里直接借用上述项目示例代码，只是做了简单改造。

添加资源文件

资源文件包括json文件，图片等，直接在pubspec.yaml配置文件中增加，然后需要调用即可。

效果图

这里还是通过Edge浏览器展示运行效果：

这里主要使用了第三方的控件，后续也可能会用到，这样也可以提高开发效率。当然，也可以自行实现自定义控件。