搭建我的项目主框架

新建微信聊天，通讯录，发现，我的四个文件

上一篇文章最初咱们曾经将APP的TabBar和四个对应的子视图搭建好了，然而每一个子视图外面必定会有大量的代码，全副放到rootPage文件外面必定是不合理的。所以咱们为每个子视图创立独自的文件，并将代码扩散到每个文件中。

比方聊天页面，返回本人的Scaffold：

当初咱们点击切换一下tabBar的item，发现会有一些高亮的色彩，以及一个水波纹成果，这些都是MaterialApp类的theme提供的。如果想去掉这些成果，要来到main.dart文件，设置以下两个属性：

认真查看点击item的时候，文字被放大了。这个是bottomNavigationBar的属性selectedFontSize决定的，将它设置为12.0之后，就不会变大了，在rootPage.dart文件外面：

本地资源文件

配置Android的启动图和利用图标

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

Android和iOS的资源文件，比方APP的图标，启动图，须要到相应的我的项目文件外面去配置。咱们大家都是iOS开发者了，这里就只说一下Android的图标和启动图如何配置。有须要图片资源的同学能够返回下载

在安卓模拟器上运行起来之后，会发现安卓的题目不是在两头

这里能够通过AppBar的一个属性，来调整让它变成两头显示

配置公共的资源

如果是两端都须要的资源，比方咱们APP的微信，通讯录，发现和我的图标。须要在以后flutter我的项目中配置了。

pubspec.yaml文件是咱们flutter我的项目的配置文件。文件内assets和上面的几行示意须要的图片门路，能够在flutter我的项目的根目录下创立一个images的目录，外面寄存所有以后flutter须要用的图片。而后还须要手动导入一张一张图片...这点就比拟恶心人了...更恶心人的是，这个yaml文件的格局，包含地位都不能错，比方刚刚放开正文的时候，如果你应用的是command + /快捷键，那么你就得好好移动下地位了，地位不对编译不通过。

实现发现页

设置APP启动默认展现发现页面

这个不便咱们开发调试这个发现页面，咱们开发原生APP的时候也常常会这么干。间接将rootPage.dart里的_currentIndex设置为2就OK了，这个不必多说

配置导航条

微信的导航条色彩是灰色的。而后在安卓上这个导航条题目默认在左侧，这里也须要设置一下在两头。而后题目的色彩也不是红色，改为彩色。而后导航条和上面的body有一条黑线，能够通过设置elevation的值来管制。

自定义发现cell

新建一个pages文件，将所有页面文件都放到外面。而后在新建一个discover_cell筹备实现自定义的cell。按情理来说一个cell应该是须要更新UI的所以应该是有状态的，然而当初咱们是练手过程，能够先用一个无状态的cell。

接下来就是实现这个自定义cell（discover_cell）的代码了；首先察看微信的发现页的cell，左侧有一个图标，和一个题目，这两个是必须要有的，不然无奈形成一个残缺的cell，而后是右侧有些cell会有子图标和子标题，还有一个右箭头，这个是每个cell都存在的。依据以上这些信息，咱们就能够定义出discover_cell应该要有的一些属性了。如下：
title 左侧的题目，必传参数
imageName 左侧的图标，必传参数
subTitle 右侧的题目，非必传参数，也叫可选参数
subImageName 右侧的图标，可选参数

如图所示，申明了这四个属性之后，给出了红色的报错，能够将光标移到报错的红色字母任意处，按住option + 回车就能够弹出右侧的抉择菜单，第一个选项应该是新版本加的，俺也不是很分明如何应用，网上材料很少，举荐去查问官网文档了。我这里就懒的去查了，因为咱们要抉择的是第二个选线Create constructor for final fields创立构造方法。仔细的同学会发现subTitle,subImageName的类型是String?这个类型前面跟了个问号，就是代表可选参数的意思，这里跟iOS的Swift倒是十分相似。

抉择创立构造方法之后，零碎会主动生成一行代码，然而这一行代码很长而且它不换行，十分难看。这里有个小技巧，在生成的代码最初一个属性前面加上一个,号而后再按option + command + L从新格式化代码，就会主动换行了。

换行之后发现，两个必传参数报错，还是老办法，光标挪动到报错的中央，按住option + 回车就会给出提醒，意思咱们要给必传参数加上required关键字。这样属性的定义就算实现了。

属性定义完了之后就是实现build办法搭建界面了。布局界面的形式有很多，能够应用Row来布局，也能够应用Stack加Positioned布局，不论什么形式能实现界面成果都能够。我这应用Row布局。代码如下：

最外层应用一个Container包装一个Row，而后Row外面再蕴含两个Container包着的Row别离代表左右两边子视图。这样看上去应该还算蛮清晰明了的。左侧局部的图标和题目是必传参数，没啥好说的。右侧因为子标题和子图标都不肯定存在，所以须要做一些解决，Text控件如果没有子标题能够显示空字符串‘’，这个比拟好解决。而子图标不能说给一张空图片，所以须要依据subImageName是否为空来显示不同的控件，如果有就显示Image，如果没有就显示一个Container占位。最右侧的箭头图标是每个cell都存在的就没啥好说的了。自定义discover_cell的代码就算实现了，下一步欠缺咱们的发现页面

欠缺发现页面

cell写好之后，欠缺发现页面就简略多了。这里应用最简略的形式来实现，就是间接拼接每个子cell的形式。

flutter外面的ListView并不像iOS中的UITableView那样分组和行。ListView只有行，自行合并几个行组成一组，组与组之间应用一个SizedBox隔开，行与行之间应用Row(因为分割线左侧是红色的，右侧是灰色的，所以须要组合两个Container)隔开。

其中购物哪一行cell右侧的子标题和子图标没有设置字体大小和图标大小，所以显示可能会有点问题，回到cell外面设置一下就好了。

实现点击cell切换到新页面

让cell可能响应点击事件GestureDetector

flutter提供了一个GestureDetector类用来检测手势，它有一个child属性，能够放咱们的UI代码。它还能响应各种手势，在不同的属性外面解决，比方咱们点击cell就是onTap属性。除了onTap之外，还有onTapDown,onTapCancel。其中onTapCancel是触摸之后来到了，onTapDown是按下就会被调用，onTap是按上来并松开之后调用。实现如下代码之后，本人试试就能明确其中差异了。

实现页面之间跳转

点击发现cell之后，须要跳转它对应的详情页面，就须要一个详情页。能够新建一个discover_child_page.dart文件，再去补充外面的页面代码。也能够从现有的一些空白文件中复制一份，比方mine_page.dart文件，它外面就只有根本的我的页面代码,只需大量批改代码就能够应用。不管应用哪种形式，新建discover_child_page.dart实现后，页面代码如下：

这个详情页的一些属性，应该是须要从里面传入的，比方title。于是定义一个title属性。

而后在以后页面展现咱们的title，之前都是在StatelessWidget外面应用咱们的属性，那在StatefulWidget外面咱们怎么应用属性呢？属性后面加上widget.

到这里发现详情页就算差不多实现了。

回到cell外面的点击办法，实现点击跳转。这里和iOS有点相似的中央就是同样是应用一个导航控制器类。flutter也是应用一个名字叫导航的类Navigator。调用以下办法。 Navigator.of(context).push(） push()的参数须要一个Route类型，这里应用MaterialPageRoute类，MaterialPageRoute的构造方法返回一个Widget，这个返回的Widget就是咱们须要跳转到的页面。代码如下：

后面讲过的，在flutter中，如果函数体的代码只有一句的话，能够应用=>的模式，于是下面能够简写成这样：

实现有状态的discover_cell

批改discover_cell为StatefulWidget

原生的微信APP在点击cell的时候，会有一个灰色的背景，在松开的时候会变回最后的色彩。当初来实现这个成果。所以咱们的discover_cell须要从StatelessWidget改为StatefulWidget。先将build办法缩起来，快捷键command加-号，0左边那个减号。

而后先将bulid办法笼罩，再将属性和构造方法笼罩。最初删除原有的StatelessWidget类。这时候build办法外面会爆一个谬误，起因是_DiscoverCellState类外面拿不到DiscoverCell的属性，所以咱们在属性后面加上widget.就好了。

实现点击变灰需要

咱们后面说过了onTap办法，onTapDown办法，onTapCancel办法的调用机会。实现这个需要就在这三个办法外面更新状态就好了。代码如下：

本篇内容临时就到这，关注前面更新！