
准备网络数据
这一步不是很重要,提供一些假数据而已,不是重点嫌麻烦的可以跳过。
先介绍一个网址:点击
这个网址用来搭建我们需要的网络数据,注册账号非常简单,这里就不多说了。
注册完成之后,新建一个仓库,简简单单取个名字就够了:

之后点击进入仓库,可以看到下图:

会默认生成以一个示例接口,可以看一看示例接口的生成规则。看不懂也没关系,我们直接直接上手自己新建一个接口,如图所示:

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

每条聊天数据,除了imageUrl还需要有用户名name和消息的内容message。@cname用来生成随机的中文名,@cparagraph用来生成随机的中文段落来表示聊天内容。我们这里只是简单的构造一下这个聊天列表所需要的数据,真正的聊天列表的数据肯定是不会这么简单的。。。

编辑的差不多的时候,记得点击保存,保存之后点击红圈中的图标就可以获取到数据

聊天页面导航条
准备工作
默认展示页面改为_currentIndex改为0,新建chat目录,将相关文件放在这里。

添加加号按钮
加号按钮这个东西,我们之前已经添加过类似的了,appBar的actions就是我们需要添加代码的地方。

本文是iOS开发者学习Flutter系列的第六篇,主要介绍了如何准备网络数据,包括使用Mock.js模拟数据,以及在Flutter中请求网络数据。接着讲解了聊天页面导航条的实现,包括导航条的准备工作、添加加号按钮。此外,文章还讨论了如何处理网络数据,使用FutureBuilder和不使用FutureBuilder的方式,并实现了超时取消刷新功能和Widget状态的保持。
最低0.47元/天 解锁文章
3931

被折叠的 条评论
为什么被折叠?



