上一篇文章咱们曾经实现了发现页面的搭建，下一步咱们实现微信的我的页面

我的页面

在着手开发我的页面之前，先新建一个 discover 目录，将发现页面相干的文件对立移动到这个目录下。这里会发现 AndroidStudio 一个比拟特地的中央，新建一个目录后，移动了的文件不须要从新导入头文件。AndroidStudio 会在须要的中央主动补全门路。这点感觉还是蛮智能的。

设置 APP 启动默认展现我的页面

这个设置在上一篇文章开发发现页面的时候也说过了，就是批改 rootPage.dart 文件里_currentIndex 的值。

布局右上角的拍照按钮

察看这个右上角的拍照按钮，会发现高低拖动列表的时候，这个拍照按钮的地位是不会发生变化的。意思是拍照按钮和列表是同级的关系，不是父子控件的关系。所以这里的布局咱们能够应用 Stack 来实现，ListView 放在底下，这个拍照按钮放在下面。布局的形式多种多样，只有是能实现需求成果的都是可行的。这个 flutter 的 UI 布局有时候写着写着就会发现括号对不上，应用 command + option + L 也不论用，仍然对不齐，这对于某些强迫症的人看起来是真的挺好受的，下图里都还是我一行一行调整了之后的。

实现 ListView 的一般 cell 局部

首先作为一个开发者，有一个学习的气氛跟一个交换圈子特地重要，这是一个我的 iOS 开发交换群：编程大鑫，不论你是小白还是大牛都欢送入驻，让咱们一起提高，独特倒退！（群内会收费提供一些群主珍藏的收费学习书籍材料以及整顿好的几百道面试题和答案文档！）

我的页面的 ListView 的头部那个 cell 显著和它其余的 cell 不同，其余的 cell 跟咱们上一篇文章里开发的 discover_cell 基本上是相似的，所以能够间接拿过去应用。做过 iOS 开发的都晓得，tableView 等滚动视图作为控制器的根视图的时候，顶部都会有一个间距，在 flutter 外面也有这样的状况，如果须要干掉，就须要将咱们的 ListView 包装在一个 MediaQuery.removePadding() 外面，而后设置它的属性removeTop: true。这样就能够去掉顶部的间距了。残缺代码如下：

此时 APP 显示如图：

实现 ListView 的头部 cell

能够看到咱们的_MinePageState 的 build 办法曾经够长了，所以对于头部 cell 的代码咱们能够封装为一个办法写在其余的中央。

对于头部 cell 这里除了布局略微简单了一些之外，就只有给图片加圆角是没有讲过的。要设置圆角图片的话，就不能应用 Image 类了。须要应用到 BoxDecoration 类，它能够设置圆角半径 borderRadius 和图片image; 残缺代码如下：

APP 显示成果如图：

我的页面就这样实现了。发现页面和我的页面这两个页面次要是对布局的灵活运用，都还是比较简单的。

通讯录页面

接下来实现通讯录界面，这节课先只实现到下图这样，边上的索引下节课再实现。

设置 APP 启动默认展现通讯录页面

这一步曾经讲过 2 次了，就不再贴图了 …

设置通讯录页面导航栏

导航栏的色彩，咱们批改了好几次了。这个色彩能够放在一个 const.dart 的专用文件里。当前对立应用这个色彩，也不便当前对立批改。

而后是通讯录页面的导航条，除了题目之外，右侧还有一个增加好友的按钮，能够应用 AppBar 的 title 实现一个简单的导航条，但其实没那个必要。AppBar 提供了一个 actions 属性，这个属性就是展现在导航条右侧的，间接应用这个 actions 就能够了。代码如下：

实现通讯录列表 cell

通讯录列表 cell 能够应用一种 cell 来实现，也能够应用两种不同的 cell 来实现，如果应用一种 cell 的话，代码外面须要判断的逻辑就会有点多。所以我这里举荐应用两种 cell 来实现。第一种就是头部的 4 个 cell，这几个属于一类，咱们应用类 _FriendLocalCell 来示意，而其余的都是属于好友 cell 属于一类，用类 _FriendNetworkCell 示意。对于这两种 cell 咱们临时先不新建文件寄存，间接在 friends_page.dart 文件中写。

实现_FriendLocalCell

这一类 cell 次要是用来展现以后列表头部的几个 cell 的，这几个 cell 的图片都是从本地加载的。从效果图上能够看出，这个 cell 只须要 title，和 imageName 这两个必传参数就够了。而后是对于布局。最外层应用一个 Row 进行左右布局，左侧应用一个能显示圆角的图片。右侧再用一个 Column 进行高低布局，将文本和底部的分隔线高低排列。这里次要有一个中央没有讲到过，就是在 flutter 中获取屏幕的宽高，咱们会抽成一个办法，放在 const.dart 文件中。如下图所示：

_FriendLocalCell的残缺代码如下：

实现_FriendNetworkCell

对于 _FriendNetworkCell，可能乍一看之下，会感觉应该和下面的 cell 差不太多。然而实际上还是有那么些区别的。首先 flutter 的 ListView 的是没有组的概念的，所以对于组题目就须要咱们本人来入手实现了，这里的做法就是，除了下面的_FriendLocalCell 所有的子控件之外，每一个 cell 都带上一个组题目，而后依据组题目是否有值，来显示或不显示组题目。那么在布局方面，就须要对下面的 cell，再包装一个 Column，将组题目和头像名称局部包起来。所以以后 cell 所须要的属性，除了好友的名字 name 和头像 imageUrl 为必须之外，还须要一个 groupTitle 为可选参数。残缺的代码如下：

筹备数据模型

同样的，数据咱们也分为两种，一种咱们就叫作通讯录，应用 AddressBook 来示意。另一种叫好友用 Friends 示意。咱们将好友列表用到的数据模型都放在新的文件 friends_data.dart 文件中。

筹备 AddressBook 模型数组

这个模型数组，能够间接依据咱们在效果图上看到的货色，生成对应的模型，和数组就好了。残缺代码如下：

筹备 Friends 模型数组

这里的数据源曾经筹备好了，咱们只须要依据数据源创立出对应的模型。这个数组是好友数组, 有须要的能够自行返回下载。

实现局部通讯录页面

当初咱们的视图和数据都曾经筹备好了。接下来就是间接应用了，咱们之前在发现页面应用 ListView 的形式，没有应用 builder，是间接应用的形式，就跟咱们在 iOS 中的 cellForRow 办法中每次创立一个新的 cell 的形式一样，cell 没有反复利用。而明天咱们应用 builder 的这种形式，就是 cell 被放入缓存池中被反复利用的形式。应用 ListView.builder() 的形式，须要传入两个参数，一个是 itemCount 元素的个数。一个是 itemBuilder，相似于 cellForRowAtIndexPath 办法，须要咱们创立 cell 并返回。残缺的代码如下：

这里再说一下对 datas 进行排序的中央。这个办法 initState() 有一个 @override 润饰，意思就会重写父类的办法，而且这个办法应该是调用的比 build 要早的。这样能力保障展现数据的时候，数据是曾经通过排序过的。而这个排序的办法，其实跟 iOS 中的 sortedArrayUsingComparator: 排序也十分的像，传入一个代码块的形式。所以有开发教训的同学，会发现真的有些货色，各个平台都是通用的，学起来也会更快更容易上手。最初 APP 的显示如下图：