「这是我参与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中咱们能够经过不同参数的值是否为空来判别需求显现什么部件：

• imageAsset不为空，阐明是前四条数据，此刻需求运用AssetImage显现本地图标；
• 不然，就阐明是后边的联系人列表数据，就需求咱们运用NetworkImage来显现网络图片；