Flutter网络数据处理-json序列化

前言

网络请求返回的数据，为了方便快捷地在UI上的控件上调用并展示，一般我们都会定义一个模型类来填充网络请求返回的json数据，用类对象的属性调用的方式，即可以防止在运行过程中出现不可预知的错误，又可以快捷地知道某个控件上需要显示哪个数据，所以将json数据转为model类可以更好地提升我们的开发效率。

众所周知，若我们手动去序列化json数据，那将是一个很痛苦的过程，这样反而增加了工作量，得不偿失。幸好，Flutter也提供了自动序列化的三方库：json_serializable

步骤

废话不多说，直接上配置步骤：

1、在pubspec.yaml中添加

dependencies:
  json_annotation: ^2.0.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

保存或者终端运行flutter packages get，项目中就会添加以上依赖。

2、新建一个model类，如user.dart，以下每个步骤都是需要我们手动输入的

// 1、引入json_annotation.dart
import 'package:json_annotation/json_annotation.dart';

// 2、这里手动输入：user.g.dart文件将在我们运行生成命令后自动生成
part 'user.g.dart';

// 3、这个标注是告诉生成器，这个类是需要生成Model类的
@JsonSerializable()

class User{
  // 4、定义网络数据json返回属性值
  String? name;
  String? email;

  // 5、必须的方法
  User(this.name, this.email);

  // 6、必须的代码：代码格式是固定的，将下面的“User”关键词替换为你定义的model类名称即可
 // 反序列化
  factory User.fromJson(Map json) => _$UserFromJson(json);
 // 序列化
  Map toJson() => _$UserToJson(this);
}

3、如果想要用自定义的属性名称，不想用服务端返回的属性名称

@JsonKey(name: 'user_id')
final int userId;

4、如果有些字段不想去解析，可以这样

@JsonKey(ignore: true)
  int? age; 

5、打开终端，在项目根目录下运行：

一次性生成：

flutter packages pub run build_runner build

自动监控生成：

flutter packages pub run build_runner watch

以上步骤都操作完后，在model类同级目录下就会生成对应的model.g.dart文件；接下来就可以使用创建好的模型类了。

效果

1、完整代码：

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()

class User{
  String? name;
  String? email;

  @JsonKey(name: 'user_id')
  int? userId;
  @JsonKey(ignore: true)
  int? age; 

  User(this.name, this.email, this.userId);

  factory User.fromJson(Map json) => _$UserFromJson(json);
  Map toJson() => _$UserToJson(this);
}

2、运行完flutter packages pub run build_runner build后

截屏2021-07-13 下午11.06.53.png

终端打印以上代码，表示model.g.dart文件已经生成成功了。

若报错：
Conflicting outputs were detected and the build is unable to prompt for permission to remove them. These outputs must be removed manually or the build can be run with --delete-conflicting-outputs. The outputs are: lib/model/user.g.dart

应该是本地已经存在user.g.dart文件，需要清除。

解决方案：
运行以下两个命令：

flutter packages pub run build_runner clean
flutter packages pub run build_runner build --delete-conflicting-outputs

3、运行完flutter packages pub run build_runner watch后

截屏2021-07-13 下午11.14.56.png

若终端打印以上代码，表示实时监控已打开，只要修改了model类的属性并保存，model.g.dart文件里的代码也会自动生成。

需要注意的是，打开了watch，可能会影响hot load，若已经生成了model.g.dart文件，建议关闭watch，下次修改时再次打开即可。

结语

好了，网络json数据序列化就到这里了，有问题的可以留言或私信我，对你有帮助的话，也可以点个赞哦！

参考文档

https://flutterchina.club/json/
https://www.codercto.com/a/89377.html