筹备网络数据

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

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

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

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

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

点击右上角的编辑按钮进入编辑模式，新建一个响应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

禁用滑动切换

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