Flutter 一次完整的网络请求

1,854 阅读1分钟

简单介绍-次完整的网络请求,返回成功后,将json字符串转化为model对象,用GridView来显示出来。

1,引入http插件,在pubspec.yaml配置文件中dependencies节点中添加http插件

2,定义一个Photo类,定义一个工厂构造函数,将传过来的map对象,转化为photo对象

3,创建网络请求,首先要引入http的包路径 import 'package:http/http.dart' as http,取别名叫做http,因为返回的数据转化photo对象时, 需要密集型计算,使用Isolate的封装方法compute函数去实现。

4,将返回的数据转化为photo对象的列表,调用Photo的工厂构造方法,返回photo对象

5,使用FutureBuilder组件来处理转化为List的结果,使用它的好处是,不用调用setState函数,来通知Dart引擎来进行页面刷新,内部帮我们已经实现,有一个必传参数 builder,返回一个Widget,builder有一个参数AsyncSnapshot,包含了处理之后的结果,包含错误,和正确的情况。如果错误,返回一个Text,显示出现错误,成功有数据,使用自定义PhotoListContent组件来实现,没有内容使用CircularProgressIndicator组件来实现,就是在加载的过程当中,先显示一个loading的view,然后显示内容

6,显示 结果的Gridview,使用传过来的 List 显示在GridView上面。

7,显示的效果如下