引言
前边几节我们学习了 Flutter 中的静态数据的 ListView 展示，感觉So easy ，但是实际应用肯定多数还是使用在线数据进行展示的，所以今天，我们使用了 「玩android」的数据进行展示。
在实现过程中，走入了 「经验」的怪圈，好不容易跳出来，但是参加了「日更挑战」所以出了两篇笔记，作为文章，今天开始继续更 Flutter 的学习笔记，请大家多多关注。
今天要实现的效果 见下图
很简单，就是第一个列表是「作者的列表」，第二个列表是「文章列表」，第三个是「文章的详情，即网页」
废话不多说，开始吧
一、准备的插件
# 添加网络请求库
http: ^0.11.3+17
# 添加url_launcher,为了加载网址链接
url_launcher: ^5.0.1
在 pubspec.yaml 的dependencies中添加上面的依赖
见图
然后，点击
Packages get 当然，也可以执行 flutter packages get
二、导入包
三、定义常量
四、定义我们要使用的一些
bean受限于使用的不是自己定义的接口，所以这里的bean比较繁琐
总作者bean
单个作者bean
总的文章bean
第二层总bean
单个文章bean
如果对「接口的结构有困扰」可以直接访问上面的「玩android」提供的接口
五、开始构造第一个页面——即作者列表页面
在这里，http: ^0.11.3+17,import 'package:http/http.dart' as client; 这个库就起作用了
这里用到了
async await关键字实现了异步处理，如果有不熟悉的小伙伴，可以单独查询看如何使用，这里就略过了需要注意的
import 'dart:convert'; //使用 json 解析
里面使用到了
json解析，必须先导入上面的dart:convert包才可以
然后构造「单个作者」的条目
略过，前两篇文章已经写过了
然后去返回视图，注意，这里是我浪费时间比较多的地方，开始的时候，我以为 Flutter 的 ListView 也可以像 Android 那样去刷新数据，但是我还是 too simple 了，不过还好，浪费的时间不是很多
最终使用了「FutureBuilder」搞定，不过看到这个单词，我觉得这个名字起的确实不错：将来的构造者，我理解的意思就是当你的数据准备好了的时候，再构造Widget。
然后第一个页面就设计好了。
六、实现第一个页面到第二个页面的跳转逻辑
当然 ，这里仍然使用到了
Router 及 Navigator.of(context).push
不过，这里，我的逻辑是 点击 特定的作者之后，先加载数据，然后展示出 Widget 然后再跳转的，不过这个逻辑恰恰是FutureBuilder 的逻辑，见图
单个文章条目
获取文章列表的逻辑
FutureBuilder即跳转逻辑
七、文章列表到文章详情的跳转
这里url_launcher: ^5.0.1, import 'package:url_launcher/url_launcher.dart';起了作用
完工，总结要点
async await 的使用
FutureBuilder 的使用
http 库的使用
url_launcher 库的使用
dart:convert json包的使用
Bingo 完工！
源码地址
感谢大家的关注，点赞，收藏，转发😋~~~
网友评论