Flutter开发之JSON解析

对于JSON格式的数据交互,想必大家不会陌生。JSON(全称JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式,JSON因为具有易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率等特性,通常被用在客户端与服务端的数据交互中。

对于JSON的基本知识,本文不做详细介绍,读者可以自行搜索资料进行学习。

手动解析

手动解析通常应用在一些基本简单的场合,即数据结构不是很复杂的场景,手动解析JSON是指使用Flutter提供的dart:convert中内置的JSON解码器。它能够将原始JSON字符串传递给json.decode() 方法,然后在返回的Map<String, dynamic>中查找所需的值。 它不需要依赖任何第三方库,对于小项目来说很方便。

例如,有下面一个接口:https://jsonplaceholder.typic...,它的数据格式如下:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

由于上面的数据格式比较简单,因此我们可以使用手动解析的方式来解析它。

final responseJson = json.decode(response.body);
Map<String, dynamic> newTitle = responseJson ;
print(newTitle['title']);//打印title的值

当然,我们也可以新建一个实体类,然后将它解析到实体类中。

final responseJson = json.decode(response.body);
print(responseJson.toString());
Post postBean = Post.fromJson(responseJson);    //Post为实体类

对于数据结构不是很复杂的时候,使用fromJson来解析字段还好,但是如果数据结构比较复杂的话,手写fromJson、toJson就不太友好,并且容易出错。

借助工具解析

在Android原生开发中,我们可以使用诸如Gson、FastJson等第三方库来帮助我们将JSON数据转成实体类。同样,在Flutter开发中,我们也可以使用插件或工具来一键生成实体类。

例如,下面是豆瓣电影提供的获取电影列表的一个接口,数据返回的格式如下:

{
count: 10,
start: 25,
total: 250,
subjects: [
{
rating: {
max: 10,
average: 9.1,
details: {

},
stars: "45",
min: 0
},
genres: [
"剧情",
"动作",
"科幻"
],
title: "蝙蝠侠:黑暗骑士",
casts: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp"
},
name_en: "Christian Bale",
name: "克里斯蒂安·贝尔",
alt: "https://movie.douban.com/celebrity/1005773/",
id: "1005773"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp"
},
name_en: "Heath Ledger",
name: "希斯·莱杰",
alt: "https://movie.douban.com/celebrity/1006957/",
id: "1006957"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp"
},
name_en: "Aaron Eckhart",
name: "艾伦·艾克哈特",
alt: "https://movie.douban.com/celebrity/1053577/",
id: "1053577"
}
],
durations: [
"152分钟"
],
collect_count: 813292,
mainland_pubdate: "",
has_video: true,
original_title: "The Dark Knight",
subtype: "movie",
directors: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp"
},
name_en: "Christopher Nolan",
name: "克里斯托弗·诺兰",
alt: "https://movie.douban.com/celebrity/1054524/",
id: "1054524"
}
],
pubdates: [
"2008-07-14(纽约首映)",
"2008-07-18(美国)"
],
year: "2008",
images: {
small: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
large: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
medium: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp"
},
alt: "https://movie.douban.com/subject/1851857/",
id: "1851857"
},
title: "豆瓣电影Top250"
}

如果我们使用fromJson、toJson来进行解析的话,就比较麻烦,并且还容易出错,因此我们使用一些工具来辅助进行JSON解析。

在线生成

首先,打开JSON to Dart,如下图所示。
Flutter开发之JSON解析
然后,我们将接口返回的JSON数据拷贝到输入框中,点击创建Dart类,然后右边就是生成好的Dart代码。
Flutter开发之JSON解析
然后,创建一个Dart实体类,将上面生成的实体类代码拷贝过去即可。不过,我在使用此种方式进行JSON解析的时候,遇到一个问题,

Cannot generate dart code. Please check the project caveats.

如下图:
Flutter开发之JSON解析
至于产生的原因我也不是非常清楚,有知道的可以解释下。

FlutterJsonBeanFactory插件

除了上面的方式外,我们还可以使用FlutterJsonBeanFactory插件来辅助生成Bean类。
安装FlutterJsonBeanFactory插件很简单,以Android Studio为例,依次选择【Android Studio】->【Preferences…】->【Plugins】,然后搜索FlutterJsonBeanFactory插件安装即可,如下图所示。
Flutter开发之JSON解析
安装成功之后重启Android Studio即可,重启之后在new 的时候就会多一个【 dart bean class File from Json】选项,如下图所示。
Flutter开发之JSON解析
然后,在项目的lib目录下右键并选择【new】->【dart bean class File from JSON】来创建一个实体类,如下图。
Flutter开发之JSON解析
然后,点击【Make】按钮就可以生成一个dart实体类,如下图。
Flutter开发之JSON解析
可以发现,使用JSON转换插件来辅助开发,对于Flutter开发是非常方便的。除了FlutterJsonBeanFactory插件,另一款FlutterJsonHelper也可以完成JSON转换为Entity实体类的任务。

需要说明的是,生成实体类时,类名后面的entity是自动加上去的,可以在设置中配置自定义名称,如下图。
Flutter开发之JSON解析
然后,我们就可以使用dio库或者httpclient来请求接口,并将它转换到moviesentity实体类上,如下所示:

//获取电影列表
void getFilmList() async {
    Dio dio = new Dio();
    Response response=await dio.get(hotMovies);
    print('电影数据:'+response.toString());

    Map userMap = json.decode(response.toString());
    var movies = new MoviesEntity.fromJson(userMap);
  }

相关推荐