Flutter系列教程之(7)——网络请求框架Dio简单使用

网络请求一般APP都是需要的,在Flutter中,目前比较流行的网络请求框架是Dio,是Flutter中文网推出的,也算是国人开发的:+1:

本文主要是讲解如何简单使用Dio的get请求来获取数据,并使用Flutter中的listview进行展示

关于listview在之前已经讲过使用方法😃 不清楚的同学可以先去看看Flutter学习(6)------Tab导航与ListView使用 | Stars-One的杂货小窝

注: 本文基于Fluter1.2版本,只讲解了Dio的get请求,之后再看看有没有时间补充一波详细的使用和例子吧,本篇代码保存在github

Dio介绍

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

dio的pub.dev首页

dio的github首页

dio的中文文档

实现过程

PS:引入Dio框架,我们只需要在pubspec.yaml文件中的dependencies标签下面写即可

Dart 复制代码

dio: ^3.0.0

1.get请求数据

这里,我们使用最为简单的get请求方式来获取数据,接口的话我们使用郭霖大佬提供的API接口http://guolin.tech/api/china,我们可以使用浏览器直接访问,来看看获取的数据,如下图所示

返回的数据是各大城市的相关数据,待会我们可以使用列表把城市名显示出来即可

请求接口的代码如下

Dart 复制代码

void getCityData() async {
    Response response;
    var dio = Dio();
    response = await dio.get('http://guolin.tech/api/china');
    print(response.data.toString());
}

因为这里是数据是从接口获取的,数据为动态的,这里我们的页面得使用StatefulWidget，则是在State类初始化initState方法的时候调用接口

代码跑起来，进到页面,发现报错了😕 错误如下所示：

谷歌一看,是因为Android高版本不支持http协议的缘故,所以,按照之前的老套路,加个xml配置,调整即可

按照上面的步骤配置后,再来试下**(注意需要停止APP后重新进行编译,然后再点debug或run的图标,使用热重载是不会起作用的)**

ok,成功调通,数据已经打印出来了:happy:

2.实体类创建

之前我们Android开发的时候,使用的是Gson解析json字符串,将json字符串转为对应的实体类,好方便我们取值,这里,flutter同样也是

这里推荐使用个插件JsonToDart进行实体类的生成,插件地址

安装好插件后,我们要使用的话,可以右键,然后悬着具体菜单即可新建即可,这里我是建了个model文件夹,右键model文件夹, New -> Json To Dart

把json字符串输入进去,输入类名,之后点击Generate即可生成一个dart的实体类文件

以往Android开发中我们是使用Gson等框架,把json字符串转为实体类

而在flutter中,由于其内置有Json类型的数据,所以不必要再引入其他框架,使用jsonDecode方法即可

**小提示：**如果直接复制,jsonDecode可能会报错,因为还没有导入,可以光标选择jsonDecode,按下alt+enter,选择import开头的那个菜单即可自动导入

我们稍微改下代码，如下：

Dart 复制代码

void getCityData() async {
    Response response;
    var dio = Dio();
    response = await dio.get('http://guolin.tech/api/china',options: Options(responseType: ResponseType.plain));
    var list = jsonDecode(response.data);
    var cityList = list.map((m) => new CityModel.fromJson(m)).toList();
    print(cityList);
}

这里我们可以看到代码的第五行，传了个options参数，options是为了设置返回的类型数据，如果没有这个的话，Dio会自动将返回的数据转为Json类型的对象

但是由于现在接口返回的一个Json数组的字符串，导致无法解析成功(平常接口都是一个json的字符串,郭霖大佬写得..😅 )

所以得采用此方法进行解析，之后将数据转为List类型,里面的每个数据都是实体类

3.列表展示

展示就比较简单了,我们使用ListView即可,不过,需要注意的是,得提前在State类中定义好一个List数组

接口请求到数据之后,更新此List数组里的数据即可达到更改UI的操作**(注意使用setState()方法哦😎)**

Dart 复制代码

void getCityData() async {
    var dio = Dio();
    Response response = await dio.get('http://guolin.tech/api/china',
        options: Options(responseType: ResponseType.plain));
    var list = jsonDecode(response.data);

    var cityList = list.map((m) => new CityModel.fromJson(m)).toList();
    //注意使用setState方法
    setState(() {
      //this.list是在State类中定义的
      this.list.addAll(cityList);
    });
}

Dart 复制代码

import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/model/city_model.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'MyMaterialPage.dart';

class DioTestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return DioTestState();
  }
}

class DioTestState extends State<DioTestPage> {
  List list = [];

  @override
  Widget build(BuildContext context) {
    return MyMaterialPage("Dio获取数据及展示", _listView());
  }

  @override
  void initState() {
    getCityData();
  }

  void getCityData() async {
    var dio = Dio();
    Response response = await dio.get('http://guolin.tech/api/china',
        options: Options(responseType: ResponseType.plain));
    var list = jsonDecode(response.data);

    var cityList =
    list.map((m) => new CityModel.fromJson(m)).toList();
    setState(() {
      this.list.addAll(cityList);
    });

  }

  Widget _listView() {
    return new ListView.builder(
      //listview的子项item数量
      itemCount: list.length,
      //内边距
      padding: new EdgeInsets.all(5.0),
      itemBuilder: (BuildContext context, int index) {
        //返回每个子项item的widget
        //城市名
        return _listItemView(list[index].name);
      },
    );
  }

  Widget _listItemView(String name) {
    return Row(
      children: [
        Center(
          child: Text(name),
        ),
      ],
    );
  }
}