Flutter JSON 解析懶人攻略

1. pubspec.yaml 新增依賴

dependencies:
  json_annotation: ^2.0.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^2.0.0
複製程式碼

2. 新增引用

import 'package:json_annotation/json_annotation.dart';
part 'your_model_file_name.g.dart';
複製程式碼

3. [可選] 使用 Code Snippets

VSCode 下建立 flutter.code-snipptes

新增以下程式碼段

"Json Model": {
    "scope": "dart",
	"prefix": "fJsonModel",
	"body": [
		"@JsonSerializable()",
		"class ${1:type} {",
		"${1:type} ();",
		"factory ${1:type} .fromJson(Map<String, dynamic> json) => _$${1:type} FromJson(json);",
		"Map<String, dynamic> toJson() => _$${1:type} ToJson(this);",
		"}"
	],
	"description": "Json Model"
},
複製程式碼

4. (通過Code Snippets) 建立以下模型

@JsonSerializable() // 關鍵要素 1
class MyUserModel { // 關鍵要素 2
  int user_id;  // 要解析的欄位，和 server 欄位同名同型別
  String user_name;
  String user_avatar;

  MyUserModel({this.user_id, this.user_name, this.user_avatar});

//反序列化 關鍵要素 3
  factory MyUserModel.fromJson(Map<String, dynamic> json) => _$MyUserModelFromJson(json); 

//序列化 關鍵要素 4
  Map<String, dynamic> toJson() => _$MyUserModelToJson(this);
}
複製程式碼

5. 服務端和本地欄位不同名的處理

比如服務端叫 user_id，本地想叫 userId.

Code Snippets:

"Json key": {
	"scope": "dart",
	"prefix": "fJsonKey",
	"body": [
		"@JsonKey(name: '${1:serverKey}')",
		"final ${2:type} ${3:localKey};"
	],
	"description": "Json key"
}
複製程式碼

@JsonKey(name: 'user_id') // 服務端
final int userId; // 本地
複製程式碼

6. 有些欄位不想被解析

@JsonKey(ignore: true)
final int myVar;
複製程式碼

7. 開啟指令碼轉換剛才的原始碼

開啟終端，cd 到工程根目錄

輸入以下命令：

1. 一次性轉換

flutter pub run build_runner build
複製程式碼

2. 迴圈監控轉換

flutter pub run build_runner watch 
複製程式碼

注意：迴圈監控可能造成模擬器 hot reload 失效，建議建模完畢後關閉。

執行完之後，會自動出現 YourModel.g.dart 類，裡面就是完整的 json 解析模板程式碼。這個類不要修改，它是由指令碼自動生成。

8. 呼叫

JSON → Model

Map userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);
複製程式碼

Model → JSON

String json = jsonEncode(user);
複製程式碼