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

我的页面

在着手开发我的页面之前，先新建一个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的显示如下图：