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: 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

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

文章数据.png

那么我们来验证下在 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 的调试控制台中,你会看到下面的返回:

Dio测试返回的数据.png

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

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 模拟器上截图如下:

写入页面结果.png

iOS 真机效果图如下:

IMG_1503.JPG

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

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

分类:
iOS