刪除按下的那一刻，曾經的一切，終將消逝，煙消雲散，了無痕跡。
前言
起初，剛入坑 Flutter，拿到後臺返回 json 串，整個人是比較懵逼的。
回想起 Android，從開始的 JsonArray、JsonObject，直到最後的 Gson，使用起來簡直爽的嗨起～
而面對 Flutter 的解析 json，真的讓我頭大，倒不是有多難，而是沒找對方式方法。
說一下本文重點：
- 其實就是拿到介面返回 json 串，複製 quicktype 中，獲取生成的 bean 即可。
文末已附上鍊接，不想看水文的小夥伴可直接拉到底，上手 0 基礎。
目的：
- 個人記錄，微薄之力幫助有需要的小夥伴～
本文 json 對標網上找的一篇不錯的 Flutter Json 處理的文章，文末已附上鍊接。
神器登場
雖然 Flutter 提供了 dart:convert 庫，讓我們無縫解析 json，但是實際上對於我一樣的小白，尤其剛剛入坑的小白，上手程度還是有點費力。
那麼，有沒有一個神器，可以讓類似我一樣 0 基礎的開發者，輕而易舉解析 json 呢？
閃亮登場：
官網點選右上角，選擇 open quicktype：
按需選擇對應操作：
測試環節
由於關鍵解析實體還是通過 quicktype 生成，這裡簡單的舉個例子，讓我們一起來看，解析 json，到底多麼 easy～
一、簡單的 json 串
要解析的 json 串如下：
{
"id":"201314",
"name":"HLQ_Struggle",
"score" : 100
}
複製程式碼對應拷貝 quicktype 獲取對應實體類：
// To parse this JSON data, do
//
// final student = studentFromJson(jsonString);
import 'dart:convert';
Student studentFromJson(String str) => Student.fromJson(json.decode(str));
String studentToJson(Student data) => json.encode(data.toJson());
class Student {
Student({
this.id,
this.name,
this.score,
});
String id;
String name;
int score;
factory Student.fromJson(Map<String, dynamic> json) => Student(
id: json["id"],
name: json["name"],
score: json["score"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"score": score,
};
}
複製程式碼使用賊方便，例如解析當前這個 json：
GestureDetector(
child: _buildItemText('普通 json 解析'),
onTap: () {
showToast(studentFromJson(studentJson).name);
},
),
複製程式碼效果如下：
而普通實體轉 json 也很 easy（當然這裡我偷個懶）：
GestureDetector(
child: _buildItemText('普通 Bean 轉 json'),
onTap: () {
showToast(studentToJson(studentFromJson(studentJson)));
},
),
複製程式碼效果如下：
二、json 包含陣列
先來看下我們的 json 串：
{
"city": "張家口",
"streets": [
"尚義",
"張北"
]
}
複製程式碼同樣丟到 quicktype 獲取最終的實體類：
import 'dart:convert';
Address addressFromJson(String str) => Address.fromJson(json.decode(str));
String addressToJson(Address data) => json.encode(data.toJson());
class Address {
Address({
this.city,
this.streets,
});
String city;
List<String> streets;
factory Address.fromJson(Map<String, dynamic> json) => Address(
city: json["city"],
streets: List<String>.from(json["streets"].map((x) => x)),
);
Map<String, dynamic> toJson() => {
"city": city,
"streets": List<dynamic>.from(streets.map((x) => x)),
};
}
複製程式碼效果如下：
內容較為簡潔，就不一一展示了～
推薦使用～