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: flutter
    
dev_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(
      'https://jimmyarea.com/api/public/article',
      queryParameters: {"page": -1},
    );
    print(response);
  } catch (e) {
    print(e);
  }
}
复制代码

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

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

List<Widget> articleWidgets = [];

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    getArticles().then((value) {
      List<Widget> 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(
        'https://jimmyarea.com/api/public/article',
        queryParameters: {"page": -1},
      );
      return response.data;
    } catch (e) {
      return print(e);
    }
  }
}
复制代码

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

iOS 真机效果图如下：

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

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