前言
網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)揩懒，為了方便快捷地在UI上的控件上調(diào)用并展示，一般我們都會(huì)定義一個(gè)模型類來(lái)填充網(wǎng)絡(luò)請(qǐng)求返回的json數(shù)據(jù)挽封，用類對(duì)象的屬性調(diào)用的方式已球，即可以防止在運(yùn)行過程中出現(xiàn)不可預(yù)知的錯(cuò)誤，又可以快捷地知道某個(gè)控件上需要顯示哪個(gè)數(shù)據(jù)辅愿，所以將json數(shù)據(jù)轉(zhuǎn)為model類可以更好地提升我們的開發(fā)效率智亮。
眾所周知，若我們手動(dòng)去序列化json數(shù)據(jù)点待，那將是一個(gè)很痛苦的過程阔蛉，這樣反而增加了工作量，得不償失癞埠。幸好状原，F(xiàn)lutter也提供了自動(dòng)序列化的三方庫(kù)：json_serializable
步驟
廢話不多說，直接上配置步驟：
1苗踪、在pubspec.yaml中添加
dependencies:
json_annotation: ^2.0.0
dev_dependencies:
build_runner: ^1.0.0
json_serializable: ^2.0.0
保存或者終端運(yùn)行flutter packages get颠区，項(xiàng)目中就會(huì)添加以上依賴。
2通铲、新建一個(gè)model類毕莱，如user.dart，以下每個(gè)步驟都是需要我們手動(dòng)輸入的
// 1、引入json_annotation.dart
import 'package:json_annotation/json_annotation.dart';
// 2朋截、這里手動(dòng)輸入：user.g.dart文件將在我們運(yùn)行生成命令后自動(dòng)生成
part 'user.g.dart';
// 3蛹稍、這個(gè)標(biāo)注是告訴生成器，這個(gè)類是需要生成Model類的
@JsonSerializable()
class User{
// 4质和、定義網(wǎng)絡(luò)數(shù)據(jù)json返回屬性值
String? name;
String? email;
// 5稳摄、必須的方法
User(this.name, this.email);
// 6、必須的代碼：代碼格式是固定的饲宿，將下面的“User”關(guān)鍵詞替換為你定義的model類名稱即可
// 反序列化
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
// 序列化
Map<String, dynamic> toJson() => _$UserToJson(this);
}
3厦酬、如果想要用自定義的屬性名稱，不想用服務(wù)端返回的屬性名稱
@JsonKey(name: 'user_id')
final int userId;
4瘫想、如果有些字段不想去解析仗阅，可以這樣
@JsonKey(ignore: true)
int? age;
5、打開終端国夜，在項(xiàng)目根目錄下運(yùn)行：
一次性生成：
flutter packages pub run build_runner build
自動(dòng)監(jiān)控生成：
flutter packages pub run build_runner watch
以上步驟都操作完后减噪，在model類同級(jí)目錄下就會(huì)生成對(duì)應(yīng)的model.g.dart文件；接下來(lái)就可以使用創(chuàng)建好的模型類了车吹。
效果
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、運(yùn)行完flutter packages pub run build_runner build后
終端打印以上代碼窄驹，表示model.g.dart文件已經(jīng)生成成功了朝卒。
若報(bào)錯(cuò)：
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
應(yīng)該是本地已經(jīng)存在user.g.dart文件，需要清除乐埠。
解決方案：
運(yùn)行以下兩個(gè)命令：
flutter packages pub run build_runner clean
flutter packages pub run build_runner build --delete-conflicting-outputs
3抗斤、運(yùn)行完flutter packages pub run build_runner watch后
若終端打印以上代碼，表示實(shí)時(shí)監(jiān)控已打開丈咐，只要修改了model類的屬性并保存瑞眼，model.g.dart文件里的代碼也會(huì)自動(dòng)生成。
需要注意的是棵逊，打開了watch伤疙，可能會(huì)影響hot load，若已經(jīng)生成了model.g.dart文件辆影，建議關(guān)閉watch掩浙，下次修改時(shí)再次打開即可。
結(jié)語(yǔ)
好了秸歧，網(wǎng)絡(luò)json數(shù)據(jù)序列化就到這里了，有問題的可以留言或私信我衅澈，對(duì)你有幫助的話键菱，也可以點(diǎn)個(gè)贊哦！
參考文檔
https://flutterchina.club/json/
https://www.codercto.com/a/89377.html
