筹备网络数据

这一步不是很重要，提供一些假数据而已，不是重点嫌麻烦的能够跳过。

先介绍一个网址：点击
这个网址用来搭建咱们须要的网络数据，注册账号非常简单，这里就不多说了。

注册实现之后，新建一个仓库，简简单单取个名字就够了：

之后点击进入仓库，能够看到下图：

会默认生成以一个示例接口，能够看一看示例接口的生成规定。看不懂也没关系，咱们间接间接上手本人新建一个接口，如图所示：

点击右上角的编辑按钮进入编辑模式，新建一个响应 chatlist，类型为 Array。而后生成 chatlist 的数据，imageUrl 示意每条聊天数据的用户头像。其中用户头像的初始值外面有一段 @natural(20,99)，这个是 Mock.js 代码。这里是相干介绍 mockjs.com/

每条聊天数据，除了 imageUrl 还须要有用户名 name 和音讯的内容 message。@cname 用来生成随机的中文名，@cparagraph 用来生成随机的中文段落来示意聊天内容。咱们这里只是简略的结构一下这个聊天列表所须要的数据，真正的聊天列表的数据必定是不会这么简略的。。。

编辑的差不多的时候，记得点击保留, 保留之后点击红圈中的图标就能够获取到数据

聊天页面导航条

筹备工作

默认展现页面改为 _currentIndex 改为 0, 新建 chat 目录，将相干文件放在这里。

增加加号按钮

加号按钮这个货色，咱们之前曾经增加过相似的了，appBar的 actions 就是咱们须要增加代码的中央。

如果咱们依照这个思路写下去的话，就须要本人再去实现一个弹出菜单的类。其实 flutter 提供了咱们一些现成的类能够做到相似的成果。

PopupMenuButton

PopupMenuButton类用来弹出一个菜单，必传参数为 itemBuilder，用来实现它须要展现的内容。PopupMenuItem 就是用来展现内容的类。这里有一个细节说一下，PopupMenuButton有一个 onSelected 属性，这个属性是个闭包，意思是选中某个 PopupMenuItem 的时候，会调用这个闭包。然而有一个前提就是每个 PopupMenuItem 的value必须不为 null 的时候，才会执行 onSelected 闭包，我在这里卡了半天，网上找了半天材料也没有明确讲到这里。其余就没什么好讲的了，都比较简单。

还有一个小细节，如何设置 PopupMenuButton 的色彩，能够间接设置它的色彩

还能够设置 APP 的主题的 cardColor，不过这个优先级没有间接设置PopupMenuButton 色彩高。

申请网络数据

pub.flutter-io.cn/

这个网站能够搜寻 flutter 应用的包 packages。咱们应用http 这个包来申请咱们的网络数据。这个包是 flutter 官网提供的。理论我的项目开发的时候可能并不会应用 http 这个包，大部分是应用 dio 来申请网络数据。这里只介绍官网的 http 包如何应用。

导入 http 包

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

粘贴实现之后须要更新一下，就是获取一下包对应的代码。能够通过上方的Pub get, 也能够在终端中输出flutter packages get

命令执行完之后，就能够应用这个包了。

导入 http 头文件并取别名

发送申请

申请的发送写在 initState 外面。getData()前面跟了一个 async 示意的是异步执行。async须要搭配 await 应用，await前面跟着的是耗时的代码。所以下面的程序会先打印来了，而后再输入申请的状态码；

点击其余的页面，再次回到以后页面会发现 initState 办法从新走了一遍，这是因为咱们还没有保留住状态，前面会讲到如何放弃 Widget 的状态。

解决返回的数据

首先介绍一下，在 flutter 中如何将申请返回的 JSON 数据转为 Map，在咱们iOS 开发中是转为字典，而 flutter 中没有字典这个类型，对应的类型是 Map。以及如果将Map 转为 JSON。在iOS 中咱们晓得会应用一个 NSJSONSerialization 的类用来解决 JSON 数据。同样的，在 flutter 中也会有一个专门的类 JsonCodec 来解决。

JSON 和 Map 相互转

其中的 json 就是 JsonCodec 的实例。须要导入 'dart:convert' 头文件。flutter 中 还能够通过 is 来判断是不是某个类型。

新建聊天模型

除了红框内的办法之外，其余没什么陈腐事物。红框内的办法应该说是一个工厂办法，是设计模式的一种，用来初始化对象的。除了默认的初始化办法，还能够应用这个工厂办法来实例化一个 Chat 对象。模型建设好了之后就能够解决响应的数据了

解决响应的数据

这里用到了 Future，对于 Future 的解说能够看官网文档 dart.cn/tutorials/l…

应用 FutureBuilder 显示界面

很多时候咱们会依赖一些异步数据来动静更新 UI，比方在关上一个页面时咱们须要先从互联网上获取数据，在获取数据的过程中咱们显示一个加载框，等获取到数据时咱们再渲染页面；当然，通过 StatefulWidget 咱们齐全能够实现上述这些性能。但因为在理论开发中依赖异步数据更新 UI 的这种场景十分常见，因而 Flutter 专门提供了 FutureBuilder 来疾速实现这种性能。FutureBuilder会依赖一个 future，它会依据所依赖的future 的状态来动静构建本身。这个 future 咱们刚刚曾经筹备好了。对于 FutureBuilder 的介绍就不具体介绍了。最初残缺代码如下：

不应用 FutureBuilder 的形式

刚刚说了，咱们能够应用 FutureBuilder 来疾速实现展现异步网络数据，也能够本人实现，当初咱们本人实现一下。应用一个公有变量 _chatList 记录申请下来的数据，再依据 _chatList 的值来展现不同的页面。代码如下：

因为 getData 的返回值是 Future 的起因，getData()前面能够跟 then 办法，还能够跟谬误捕捉 catchError, 实现时的回调whenComplete，超时设置timeOut 等等，这种写法挺有意思，一路点上来就完了 …

实现超时勾销刷新性能

在每次申请的时候，重置 _cancelConnect 的值。

放弃 Widget 的状态

咱们来回点击通讯录页面和聊天页面，会发现每次点击进入以后的页面，都会从新的载入，initState()会被从新调用。将通讯录页面滑动到底部，再次点击进入会发现又默认回到了顶部。为什么会呈现这样的问题。正是因为咱们的 Widget 的状态没有放弃，每次展现都从新创立了。

Dart语言中有一个 Mixins 的概念：官网的解释是这样，能够给类 A Mixins 一个 B，那么 A 就领有了 B 的属性和办法。有点像 OC 的类扩大的意思。放弃 Widget 的状态就须要用到这个语言个性。一共有三个步骤：

1. Mixins 类AutomaticKeepAliveClientMixin

2. 重写 wantKeepAlive 办法
3. 调用父类 Builder 办法

同样把通讯录页面也实现下面的步骤。而后再次来回点击发现还是没有放弃住状态？？？这里有一个最大的问题就是咱们的根 Widget 都没有放弃住状态，那还谈什么放弃子 Widget 的状态呢。。。

应用 PageView

来到 rootPage.dart 文件，咱们会看到 body 外面间接取了数组的某个元素作为根 Widget 展现。这样是无奈放弃住状态的，应用 PageView 才能够放弃住状态。

应用 PageView，代码如下：

点击跳转到其余页面就能够间接通过 _pageController 来实现。应用了 PageView 之后会发现，不同的页面之间能够间接通过手势左右滑到就能切换了。这样的成果咱们个别是不须要的，能够设置间接敞开。如果需要的话，在滑动的办法外面从新设置底部导航条的正确地位也是没有问题的。

应用滑动切换，解决 bug

禁用滑动切换

本篇文章就到这里了，感激观看！