Flutter(十六)实战-微信通讯录界面

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

在之前的几篇文章中，我们已经通过所学知识，成功的搭建了微信的发现界面和我的界面；今天我们来尝试实现微信的通讯录界面

通讯录

导航栏按钮

在微信的通讯录界面中，导航栏右侧是有一个添加联系人按钮的，那么这个按钮如何实现呢？

在Flutter的AppBar中有一个actions的属性，其定义如下：

final List<Widget>? actions;
复制代码

通过定义我们发现，actions属性是一个数组，里边用来存放Widget，那么我们放进去两个简单的Container看一下效果： 我们在actions中添加了一粉一白两个Container，结果两个Container按照顺序一次显示在AppBar的右侧，并且将我们的标题挤到了最左侧，那么我们删除一个Container呢？ 在只保留一个Container的情况下，恢复正常；

如果要保留两个按钮，并且希望标题在中间，可以通过AppBar的centerTitle属性控制：

接下来，我们将按钮的逻辑不全，代码如下：

列表布局

我们在之前的文章中已经学会了如果构建一个ListView，这里搭建联系人列表的过程，就不再赘述，我们直接看初步效果： 在这个列表中，我们的数据源分为了两部分：

• 第一部分，头部的四条本地数据，这部分数据是固定的；
• 第二部分，下部的联系人列表数据，这部分数据是从其他地方获取的人员信息列表；

我们在布局的时候，使用同一个ListView显示两个数据源的数据；然后，在_itemForRow中通过index来判断每一行要显示的数据来源：

• 如果index小于_headerList.length，说明是前四条数据，那么需要从_headerList中获取数据信息，传递给_ContactsCell来显示；
• 否则，从datas也就是联系人列表中获取人员信息数据，传递给_ContactsCell来显示；

接下来，我们来看一下_ContactsCell的具体实现：

• _ContactsCell布局主要分为上下两部分，采用Column进行纵向布局；
  • 上部：显示头像(图标)和名字；
  • 下部：显示分割线；
• 在上部显示头像和名字的布局中，采用Row进行横向布局；

在讲数据传入_ContactsCell之前，我们已经通过index判断，传入了不同的参数，所以在_ContactsCell中我们可以通过不同参数的值是否为空来判断需要显示什么部件：

扫描二维码关注公众号，回复： 13169541 查看本文章

• imageAsset不为空，说明是前四条数据，此时需要使用AssetImage显示本地图标；
• 否则，就说明是后边的联系人列表数据，就需要我们使用NetworkImage来显示网络图片；