(十三)实战-模仿微信发现界面

在之前的文章中我们已经搭建好了一个完整项目的框架，并且已经学会如何去加载本地的图片资源，那么今天我们就运用所学的知识，来模仿搭建微信的发现界面；我们先来看一下最终效果：

自定义 cell

属性及构造方法

首先我们来看一下这个界面上，每一个条目的元素组成，其元素最多的条目，也就是购物条目，有五个元素：图标，标题，子标题，红点 (称为子图标)，箭头，但是由于箭头这个元素是每一个条目固定的，所以我们在自定义的时候，只需要暴露四个元素即可；另外，由于子标题和子图标并非每一个条目都有的，所以期应该设置为空安全的：

final String? iconName; // 图标名字
  final String? title; // 名字
  final String? subTitle; // 子标题
  final String? subIconName; // 子图标名字

  FoundCell({
    required this.iconName, // 必须要有
    required this.title, // 必须要有
    this.subTitle,
    this.subIconName,
  }) : assert(title != null, 'title 不能为空'), assert(iconName != null, 'iconName 不能为空');

assert 断言，当 title 和 iconName 中有任何一个属性为空的时候，将会报错；

布局

我们从整体上看条目，可以将条目上的元素分为两部分：

• 第一部分：图标，标题；
• 第二部分：子图标，子标题，箭头
• 第一部分与第二部分分别布局在条目的两端

那么，我们可是使用Row进行布局： 首先看左边，左边的两个元素：图标和标题，我们可以在Container中使用Row进行布局，在其中添加Image和Text两个部件：

• 图标和标题上下左右都有空白，我们使用padding给部件添加内边距；
• 在图标和标题中间有间隔，使用SizeBox增加15像素的空白；

右边元素分为三个部件：子标题，子图标，箭头，但是子标题和子图标这两个部件并非必须要显示的，所以需要根据属性来判断：

• 子标题：当子标题为空时，我们直接给返回的Text部件赋值一个空字符串，否则赋值子标题；
• 子图标：当子图标为空时，我们返回一个空的Container部件，否则返回Image；

Image.asset('')和AssetImage('')是两种加载本地图片的方式；

界面布局

从整体上看，发现界面是一个ListView来构建的，我们在之前曾经是用过ListView，在之前我们使用的是：

ListView.builder(itemBuilder: itemBuilder)

发现界面相对简单，条目数量也有限，那么我们今天换一种思路来实现： 直接通过ListView的构造方法，将所有的条目，逐行添加到ListView上面；

那么条目之间的间隙怎么添加呢，这里有两种方式，一种是添加Container，一种是使用SizeBox，此处我们使用SizeBox来添加条目之间的间隔：

分割线处理

我们注意到，在微信中，两个相邻的cell之间是有分割线的，而且分割线左侧是和文字对齐的；那么这个分割线我们怎么实现呢？这里我们推荐使用Row，在这里我们第一个想到的部件基本上回事Container，但是需要注意的是，使用Container的话，不管是设置padding还是margin在左侧都会显示出空白的区域，那么机会将底部灰色显示出来；

我们此处使用Row，可以在Row中添加两个Container，第一个白色背景，宽度50，第二个灰色背景，高度均为0.5：

子标题和子图标