irpas技术客

Flutter-JSON转Model以及json_serializable使用步骤_mrRuby_flutter json转模型

未知 7749

一、前言

现在大多数接口返回的数据都是json格式,在面向对象的开发过程中,基本上都需要转换为Model模型,方便在开发中使用。在Android开发中json字符串转Model对象,可以使用Gson、FastJson等,但在Flutter中确没有这么方便。在Flutter中,提供了dart.convert以及json.dart来解析json字符串,但转换后Map对象,要转换为Model对象还需要进一步处理。

二、JSON转Modle手动转换

2.1 定义Model对象以及转换方法

class Photo { final int albumId; final String title; Photo({required this.albumId, required this.title}); factory Photo.fromJson(Map<String, dynamic> json) { return Photo( albumId: json['albumId'] as int, title: json['title'] as String); } Map<String, dynamic> toJson() { return {'albumId': albumId, 'title': title}; } @override String toString() { return 'Photo{albumId: $albumId, title: $title}'; } }

2.2 测试代码

void main() { var jsonStr = "{\"albumId\": 10001, \"title\": \"this is photo title\"}"; //使用框架自带json解析工具 var jsonMap = jsonDecode(jsonStr); var photo = Photo.fromJson(jsonMap); print(photo.toString()); }

手动将Json转换为Model对象略显麻烦,对象属性较少的情况还是能够接受的。

三、JSON转Modle使用json_serializable进行解析

手动写fromJson和toJson方法略显麻烦,这里官方提供了json_serializable,自动帮我们完成相关方法的实现。

3.1 配置

进入pub.dev官网,查看json_serializable的集成文档,提到需要 package:json_annotation,但是没有明确的说明,需要查看example

进入demo,根据要求,在pubspec.yaml中添加

dependencies: json_annotation: ^4.4.0 dev_dependencies: build_runner: ^2.0.0 json_serializable: ^6.1.0

添加完package后,确没有说应该添加什么内容,查看example.dart,里面的内容也是完整的,自己写的时候确不知道怎么下手。接下来就一步一步的尝试。

第一步:

新建example.dart,并新建Animal类,添加@JsonSerializable()注解,如下所示:

@JsonSerializable() class Animal{ final String name; final String age; Animal(this.name, this.age); }

第二步:执行命令

如果是flutter项目,需要执行以下命令生产example.g.dart文件。

flutter packages pub run builder_runner build

在AndroidStudio的Terminal中,执行上面的命令,得到以下信息

[INFO] Generating build script... [INFO] Generating build script completed, took 342ms [INFO] Initializing inputs [INFO] Reading cached asset graph... [INFO] Reading cached asset graph completed, took 63ms [INFO] Checking for updates since last build... [INFO] Checking for updates since last build completed, took 618ms [INFO] Running build... [INFO] Running build completed, took 16ms [INFO] Caching finalized dependency graph... [INFO] Caching finalized dependency graph completed, took 41ms [INFO] Succeeded after 67ms with 0 outputs (0 actions)

第三步:添加fromJson和toJson方法,在执行build命令

@JsonSerializable() class Animal{ final String name; final String age; Animal(this.name, this.age); factory Animal.fromJson(Map<String,dynamic> json) => _$AnimalFromJson(json); Map<String,dynamic> toJson() => _$AnimalToJson(this); }

执行结果:

...... [INFO] Succeeded after 948ms with 1 outputs (2 actions)

却没有找到任何的输出的example.g.dart文件。

第四步:添加part ‘example.g.dart’; 再运行build命令:

part 'example.g.dart'; @JsonSerializable() class Animal{ final String name; final String age; Animal(this.name, this.age); factory Animal.fromJson(Map<String,dynamic> json) => _$AnimalFromJson(json); Map<String,dynamic> toJson() => _$AnimalToJson(this); }

结果:终于生产了example.g.dart文件。原来part 'example.g.dart’才是这里的关键。

Animal _$AnimalFromJson(Map<String, dynamic> json) => Animal( json['name'] as String, json['age'] as String, ); Map<String, dynamic> _$AnimalToJson(Animal instance) => <String, dynamic>{ 'name': instance.name, 'age': instance.age, };

可以自动生成的结果和我们手动写的基本一致。到这里感觉官网的文档说明真没有说清楚,到底哪些是应该添加,只看demo不一步一步的尝试是不知道**.g.dart是如何生产的。

四、json_serializable的使用步骤

以下内容都是必须添加的,如果后续json_serializable的版本升级后有变动,需根据最新的方法来完成。

第一步:在pubspec.yaml添加package

dependencies: json_annotation: ^4.4.0 dev_dependencies: build_runner: ^2.0.0 json_serializable: ^6.1.0

第二步:添加实体类,必须写构造方法

class *{ finla String field1; final String field2; *(this.field1,this.field2); }

第三步:添加注解和part 'x.g.dart’

part '*.g.dart' @JsonSerializable() class *{ finla String field1; final String field2; *(this.field1,this.field2); }

添加part '*.g.dart’会报错,这里可以先不用管,运行后面的build命令后会消除。

第四步:运行build命令

flutter packages pub run build_runner build

运行完成该命令后会自动生产*.g.dart文件,里面有相关的fromJson和toJson方法。

第五步:在实体中添加fromJson工厂构造函数和toJson方法

part '*.g.dart' @JsonSerializable() class *{ finla String field1; final String field2; *(this.field1,this.field2); factroy *.fromJson(Map<Stirng,dynamic> json) => _*FromJson(json) Map<String,dynamic> toJson() => _*ToJson(this) }

如果后面的开发过程中,Model中有字段的添加、删除或者类型修改,只需要重新执行一次build命令即可。

最后 上面介绍了Json转Model的两种方法经过自己的测试,详细介绍了json_serializable的使用步骤,需要特别注意添加 part '*.g.dart’才能生产对应的文件以及相关的fromJson和toJson方法。吐槽一下官方的说明文档,真不够清楚,没有明确的步骤说明,导致到初次集成的时候很难发现问题以及不能生产*.g.dart文件以及相关的方法。其他关于json_serializable的更多用法参考官网说明


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #Flutter #json转模型 #photo