前言
前一篇博文已经详细介绍了Flutter开发中的网络请求，但其实大多数项目中，返回HTML内容是不够的，因为移动端使用的最多的请求是JSON数据，所以我们需要掌握Flutter开发中，JSON解析的知识。（JSON(javaScript Object Notation，JS对象简谱)是一种轻量级的数据交换格式）
JSON转换成Dart对象
假设，我们现在是开发的是一款新闻App，通过访问相关的接口之后，服务器返回了这样一条简单的JSON数据，如下图所示：
{"title":"疫情疫苗出世，多板块重大利好"}
那么我们应该如何处理这条数据显示在界面上呢？相信有过Java开发Android经验的读者，肯定知道如何把这段数据还原成一个对象，并且在界面显示出来。同样，在Flutter开发中，也可以把这个JSON数据转换为Dart对象，我们先定义Dart对象News，代码如下：
class News{
final String title;
News({this.title});
factory News.fromJson(Map<String,dynamic> json){
return News(
title: json['title'],
);
}
}
在dart:convert里面有一个JSON常量，它是负责处理服务端返回的JSON数据的，在请求响应回来的时，通过json.decode(response.body)方法调用可以把JSON结果转换城Map类型或List类型。如果是一个JSON对象，返回将是一个Map；如果是JSON数组，则会返回List。
上面代码之所以把map的value定义成dynamic，是因为不肯定value的类型，毕竟有可能是字符串，有可能是整型，还是用这个自动匹配类型最实在。
实践
在JSON解析之后，我们需要把结果通过界面的形式展现给用户看，所以下面我们直接来实现其功能：
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState(news: httpPost());
}
class _MyHomePageState extends State<MyHomePage> {
final Future<News> news;
_MyHomePageState({Key key,this.news});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HttpClient"),
),
body:Center(
child: FutureBuilder<News>(
future: news,
builder: (context,snapshot){
if(snapshot.hasData){
return Text(snapshot.data.title);
}else if(snapshot.hasError){
return Text("错误啦");
}
return CircularProgressIndicator();
},
),
),
);
}
}
Future<News> httpPost() async{
final response=await http.get("http://liyuanjinglyj.com/demo/");
if(response.statusCode==200){
print(utf8.decode(response.bodyBytes));
return News.fromJson(json.decode(response.body));
}else{
throw Exception('请求不到JSon');
}
}
class News{
final String title;
News({this.title});
factory News.fromJson(Map<String,dynamic> json){
return News(
title: json['title'],
);
}
}
代码很简单，这里专门定义了一个JSON的Dart类，用于处理JSON数据，同时用FutureBuilder组件将JSON显示在屏幕上。显示效果首图所示。
根据JSON用工具生成实体类
上面可以说是静态生成JSON格式，也就是说手动定义了一个JSON类，但是假如有许多许多JSON格式的数据，那怎么获取JSON数据呢？一个一个写肯定麻烦的很，所以我们需要借助工具去自动生成JSON类，这里就也需要在pubspec.yaml中导入依赖：
dependencies:
json_annotation: ^2.0.0
dev_dependencies:
build_runner: ^1.0.0
json_serializable: ^2.0.0
然后我们创建一个实体类，格式如下：
import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';
@JsonSerializable()
class User{
String name;
String email;
User({this.name,this.email});
factory User.fromJson(Map<String,dynamic> json)=>_$UserFromJson(json);
Map<String,dynamic> toJson=>_$UserToJson(this);
}
这里会报错，特别是part ‘user.g.dart’;与最后两句，都会出现红色的波浪线提示，但这是正常的不用急，我们可以把上面的代码看成是模板，然后我们在工程目录文件下输入如下命令：
flutter packages pub run build_runner build
输入完这个命令之后，就会生成一个user.g.dart文件，在user.dart同级目录之中，代码如下：
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'user.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
User _$UserFromJson(Map<String, dynamic> json) {
return User(name: json['name'] as String, email: json['email'] as String);
}
Map<String, dynamic> _$UserToJson(User instance) =>
<String, dynamic>{'name': instance.name, 'email': instance.email};
博主为了直观，所以减少了许多参数，但在实际情况中，JSON的参数肯定会有很多，甚至还有层级，那么这种情况下，这样自动生成起来肯定比较方便，也比较节约时间。
但这种方式也会有一个缺陷，就是假如我的JSON格式变更了，那还不得一次一次生成？很显然，Flutter也考虑到这种情况，所以提供给我们一种监听模式来实现每一次的生成，命令如下：
flutter packages pub run build_runner watch
这个命令只需要执行一次，那么就会一直监听在后台运行，在也不要我们操作什么就可以自动生成了。
当JSON类属性与服务器返回属性不一致时
虽然说上面的操作很方便，但自动生成还有一个待解决的问题，那么就是当自己的JSON类与服务器端返回的字段不一致的时候怎么办？当然你可以直接更改字段，但可能一改就要动全部的内容，所以这个时候使用JsonKey注解的方式就比较高效了，比如：
@JsonKey(name:'user_name')
final String userName;
这样注解加自动生成JSON类就非常完美高效，可以大大提高程序的开发效率。
