0
点赞
收藏
分享

微信扫一扫

Flutter 加载网络数据,展示ListView(玩 android接口)

前边几节我们学习了 Flutter 中的静态数据的 ListView 展示,感觉So easy ,但是实际应用肯定多数还是使用在线数据进行展示的,所以今天,我们使用了 「玩android」的数据进行展示。
在实现过程中,走入了 「经验」的怪圈,好不容易跳出来,但是参加了「日更挑战」所以出了两篇笔记,作为文章,今天开始继续更 Flutter 的学习笔记,请大家多多关注。

很简单,就是第一个列表是「作者的列表」,第二个列表是「文章列表」,第三个是「文章的详情,即网页」

废话不多说,开始吧

      #  添加网络请求库
      http: ^0.11.3+17
      #  添加url_launcher,为了加载网址链接
      url_launcher: ^5.0.1

pubspec.yamldependencies中添加上面的依赖

见图


然后,点击 Packages get 当然,也可以执行 flutter packages get

如果对「接口的结构有困扰」可以直接访问上面的「玩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

然后第一个页面就设计好了。

当然 ,这里仍然使用到了
RouterNavigator.of(context).push
不过,这里,我的逻辑是 点击 特定的作者之后,先加载数据,然后展示出 Widget 然后再跳转的,不过这个逻辑恰恰是FutureBuilder 的逻辑,见图

这里url_launcher: ^5.0.1, import 'package:url_launcher/url_launcher.dart';起了作用

async await 的使用
FutureBuilder 的使用
http 库的使用
url_launcher 库的使用
dart:convert json包的使用

Bingo 完工!

源码地址
感谢大家的关注,点赞,收藏,转发?~~~

举报

相关推荐

0 条评论