搭建我的项目主框架

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

上一篇文章最初咱们曾经将 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 办法的调用机会。实现这个需要就在这三个办法外面更新状态就好了。代码如下：

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