Flutter-JSON转Model的四种便捷方案

在日常开发中JSON的序列化与反序列化是一个常见的操作，如果都是我们手动去解析JSON数据，是很麻烦的。如果能够自动转化就省去了很多事情。下面来讲解下五种常见的转换方式：

手动序列化JSON

手动定义那些属性，实现 fromJson 和 toJson，解析的时候调用

ProductItemModel.fromJson(result.data)
复制代码

class ProductItemModel {
  String? sId;   //String? 表示可空类型
  String? title;

  ProductItemModel(
      {this.sId,
        this.title,
      });

  ProductItemModel.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['title'] = this.title;
    return data;
  }
}
复制代码

工具实现

iOS里面的自动转换工具：juejin.cn/post/702689…

Flutter 中也找到了转换的工具：app.quicktype.io ，相对来讲也是比较好用的。

截屏2021-12-28 下午9.54.10.png

这样就可以实现转化。由于Flutter禁用运行时反射，才导致没有像iOS成熟的库完成解析，比如 MJExtension、 YYModel，这里介绍一个相对成熟的库 json_serializable 实现转化。

json_serializable 实现

在项目的 pubspec.yaml 文件中添加依赖：

json_serializable: ^6.1.3
build_runner: ^2.1.7
json_annotation: ^4.4.0
复制代码

然后执行 pub get。要想使用转化，首先要先用工具生成模型类，工具地址：caijinglong.github.io/json2dart/i…

截屏2021-12-28 下午9.31.39.png

在项目里面创建模型类，把工具转换的代码拷贝到这个模型类里面

import 'package:json_annotation/json_annotation.dart';

part 'person.g.dart';


List<person> getpersonList(List<dynamic> list){
  List<person> result = [];
  list.forEach((item){
    result.add(person.fromJson(item));
  });
  return result;
}
@JsonSerializable()
class person extends Object with _$personSerializerMixin{

  @JsonKey(name: 'name')
  String name;

  @JsonKey(name: 'age')
  String age;

  @JsonKey(name: 'tele')
  String tele;

  person(this.name,this.age,this.tele,);

  factory person.fromJson(Map<String, dynamic> srcJson) => _$personFromJson(srcJson);

}
复制代码

接下来在终端执行flutter packages pub run build_runner watch，就会在项目里面生成person.g.dart文件，这个里面就是转换好的代码。

截屏2021-12-28 下午9.38.57.png

也可以执行 flutter packages pub run build_runner build生成 person.g.dart文件，区别在于上面是持续生成，下面这个是一次性生成。

注意上面工具使用时，会按着list里面第一个map里面的数据进行解析，假如数组里面其他map字段比较多，就会存在漏字段的情况，这个还需要注意检查下。整体使用下来也不是很方便，还不如用工具直接生成简单：app.quicktype.io 。

插件 JsonToDart 实现

在 Android Studio 中安装 JsonToDart 插件，打开 Preferences（Mac）或者 Setting（Window），选择 Plugins，搜索 JsonToDart

截屏2021-12-28 下午10.08.59.png

点击 Install 安装，安装完成后重启。这个时候选定目录，点击右键，选择 New->Json to Dart，或者使用快捷键

Windows：ALT + Shift + D
Mac：Option + Shift + D
复制代码

截屏2021-12-28 下午10.11.24.png

选中 Json To Dart 后，弹出页面输入要转换的json数据

截屏2021-12-28 下午10.10.35.png

截屏2021-12-28 下午10.10.55.png

点击完成，就会生成对应的模型文件了。

插件 FlutterJsonBeanFactory 实现

其实和上面的插件使用方法差不多，首先通过快捷键 CMD + ,打开偏好设置，然后在 Plugins 里面搜索 FlutterJsonBeanFactory

截屏2021-12-29 上午11.23.34.png

点击 Install 安装，安装完成后重启。这个时候选定目录，点击右键，选择 New->JsonToDartBeanAction

截屏2021-12-29 上午11.24.38.png

截屏2021-12-29 上午11.31.50.png

输入Class Name，把要解析的json数据复制到这里 JSON Text中，然后点击 Make 就会生成对应的model 的 dart 文件。

截屏2021-12-29 上午11.46.01.png

这里就可以看到，通过网络请求到的数据，确实转换成功了。

注意：假如我们输入的Class Name 不符合 Dart 语法，会自动转成 a_b_c_entity.dart 这样符合要求的命名。自动生成的类名多了entity，这个我们其实是可以修改的。

截屏2021-12-29 上午11.47.05.png

一般情况下，插件都会安装 json 数据中的 key 生成属性名称，如果需要自定义，那就修改生成的dart文件的属性值，然后点击这里就都改过来了。

截屏2021-12-29 下午2.19.07.png

上面用到的两个插件都是 Android Studio 的，转换后还是自查下，防止转换出现了差错。

总结

手动序列化JSON：比较麻烦，效率低。
json_serializable：效率高，依旧有些麻烦。
工具网站：效率高，更多功能可选。
插件：效率高，使用最方便。