前言
网络请求返回的数据,为了方便快捷地在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<String, dynamic> json) => _$UserFromJson(json);
// 序列化
Map<String, dynamic> 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<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
2、运行完flutter packages pub run build_runner build后
终端打印以上代码,表示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后
若终端打印以上代码,表示实时监控已打开,只要修改了model类的属性并保存,model.g.dart文件里的代码也会自动生成。
需要注意的是,打开了watch,可能会影响hot load,若已经生成了model.g.dart文件,建议关闭watch,下次修改时再次打开即可。
结语
好了,网络json数据序列化就到这里了,有问题的可以留言或私信我,对你有帮助的话,也可以点个赞哦!
参考文档
https://flutterchina.club/json/
https://www.codercto.com/a/89377.html