Flutter 结合 Dio 使用

Flutter 结合 Dio 使用

上一篇文章 ​​Flutter 布局备忘录 -- 多图警告，干货建议收藏​​​ 中，我们基本了解了 ​​Flutter​​ 相关的布局。那么，我们怎么拿到数据，然后填充到部件中呢？

这里我们使用 ​​Dio​​ 来进行接口的请求。

学过前端的读者应该不陌生，在 ​​package.json​​ 中有下面两种方式引入包：

"dependencies": { "@angular/animations": "9.1.11",},"devDependencies": { "tslint": "~6.1.2",}

​​dependencies​​​ 下的包是要发布到生产环境，而 ​​devDependencies​​ 下的包只用于开发环境。

在 ​​flutter​​​ 中，​​pubspec.yaml​​ 也对应着这两个环境，如下：

dependencies: flutter: sdk: flutterdev_dependencies: flutter_test: sdk: flutter

这里默认你已经创建一个 ​​Flutter​​​ 项目，如果还不清楚如何创建，可以查阅本文 ​​Flutter 系列 - 开始你的第一个应用​​。

因为我们生产环境还是要用到 ​​Dio​​​，所以我们需要在 ​​dependencies​​ 下添加包：

dependencies: flutter: sdk: flutter dio: ^4.0.6

截止发文，​​Dio​​​ 的最新版本为 ​​^4.0.6​​

运行 ​​flutter pub get​​​ 拉取相关的依赖。如果安装不成功，可尝试另一种安装方法，运行 ​​flutter pub add dio​​。

这里我使用个人站点的接口 ​​获取文章的接口数据​​ 来调试，你可以复制其接口到浏览器中查看，返回的数据如下图所示：

那么我们来验证下在 ​​Flutter​​ 中能否请求到。

我们引入 ​​import 'package:dio/dio.dart'​​ 包后，发起一个请求：

void getArticles() async { try { Response response; response = await Dio().get( ' queryParameters: {"page": -1}, ); print(response); } catch (e) { print(e); }}

调用 ​​getArticles()​​​，保存页面之后，在 ​​VSCode​​ 的调试控制台中，你会看到下面的返回：

还不错是吧，现在我们来回填下获取内容，更改代码如下：

List articleWidgets = [];class _MyHomePageState extends State { @override Widget build(BuildContext context) { getArticles().then((value) { List temp = []; value['data']['results'].forEach((item) { temp.add(Text(item['title'])); }); setState(() { articleWidgets = temp; }); }); // 相关的布局 return Material( color: Colors.blue, child: SafeArea( child: SizedBox.expand( child: Card( color: Colors.yellowAccent, child: Column( mainAxisAlignment: MainAxisAlignment.start, children: articleWidgets, ), ), ), ), ); } // 获取文章数据 Future getArticles() async { try { Response response; response = await Dio().get( ' queryParameters: {"page": -1}, ); return response.data; } catch (e) { return print(e); } }}

上面代码中，我们先通过 ​​getArticles()​​​ 函数返回一个类似 ​​promise​​​ 的数据，然后在 ​​then​​​ 函数中通过 ​​setState​​​ 来更新获取的部件，然后渲染到页面。​​iOS​​ 模拟器上截图如下：

​​iOS​​ 真机效果图如下：

对于 ​​iOS​​​ 真机上的效果，读者可以移步文章 ​​Flutter iOS 真机测试 -- 值得收藏​​。

Not Bad. 读者可以自行跑起来验证。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。