Flutter-JSON轉Model的四種便捷方案

在日常開發中JSON的序列化與反序列化是一個常見的操作，如果都是我們手動去解析JSON資料，是很麻煩的。如果能夠自動轉化就省去了很多事情。下面來講解下五種常見的轉換方式：

手動序列化JSON

手動定義那些屬性，實現 fromJson 和 toJson，解析的時候呼叫

ProductItemModel.fromJson(result.data)

``` class ProductItemModel { String? sId; //String? 表示可空型別 String? title;

ProductItemModel( {this.sId, this.title, });

ProductItemModel.fromJson(Map json) { sId = json['_id']; title = json['title']; }

Map toJson() { final Map data = new Map(); data['_id'] = this.sId; data['title'] = this.title; return data; } } ```

工具實現

iOS裡面的自動轉換工具：https://juejin.cn/post/7026898009900187679

Flutter 中也找到了轉換的工具：https://app.quicktype.io ，相對來講也是比較好用的。

這樣就可以實現轉化。由於Flutter禁用執行時反射，才導致沒有像iOS成熟的庫完成解析，比如 MJExtension、 YYModel，這裡介紹一個相對成熟的庫 json_serializable 實現轉化。

json_serializable 實現

在專案的 pubspec.yaml 檔案中新增依賴：

json_serializable: ^6.1.3 build_runner: ^2.1.7 json_annotation: ^4.4.0

然後執行 pub get。要想使用轉化，首先要先用工具生成模型類，工具地址：https://caijinglong.github.io/json2dart/index_ch.html

在專案裡面建立模型類，把工具轉換的程式碼拷貝到這個模型類裡面

``` import 'package:json_annotation/json_annotation.dart';

part 'person.g.dart';

List getpersonList(List list){ List result = []; list.forEach((item){ result.add(person.fromJson(item)); }); return result; } @JsonSerializable() class person extends Object with _$personSerializerMixin{

@JsonKey(name: 'name') String name;

@JsonKey(name: 'age') String age;

@JsonKey(name: 'tele') String tele;

person(this.name,this.age,this.tele,);

factory person.fromJson(Map srcJson) => _$personFromJson(srcJson);

} ```

接下來在終端執行flutter packages pub run build_runner watch，就會在專案裡面生成person.g.dart檔案，這個裡面就是轉換好的程式碼。

也可以執行 flutter packages pub run build_runner build生成 person.g.dart檔案，區別在於上面是持續生成，下面這個是一次性生成。

注意上面工具使用時，會按著list裡面第一個map裡面的資料進行解析，假如數組裡面其他map欄位比較多，就會存在漏欄位的情況，這個還需要注意檢查下。整體使用下來也不是很方便，還不如用工具直接生成簡單：https://app.quicktype.io 。

外掛 JsonToDart 實現

在 Android Studio 中安裝 JsonToDart 外掛，開啟 Preferences（Mac）或者 Setting（Window），選擇 Plugins，搜尋 JsonToDart

點選 Install 安裝，安裝完成後重啟。這個時候選定目錄，點選右鍵，選擇 New->Json to Dart，或者使用快捷鍵

Windows：ALT + Shift + D Mac：Option + Shift + D

選中 Json To Dart 後，彈出頁面輸入要轉換的json資料

點選完成，就會生成對應的模型檔案了。

外掛 FlutterJsonBeanFactory 實現

其實和上面的外掛使用方法差不多，首先通過快捷鍵 CMD + ,開啟偏好設定，然後在 Plugins 裡面搜尋 FlutterJsonBeanFactory

點選 Install 安裝，安裝完成後重啟。這個時候選定目錄，點選右鍵，選擇 New->JsonToDartBeanAction

輸入Class Name， 把要解析的json資料複製到這裡 JSON Text中，然後點選 Make 就會生成對應的model 的 dart 檔案。

這裡就可以看到，通過網路請求到的資料，確實轉換成功了。

注意：假如我們輸入的Class Name 不符合 Dart 語法，會自動轉成 a_b_c_entity.dart 這樣符合要求的命名。自動生成的類名多了entity，這個我們其實是可以修改的。

一般情況下，外掛都會安裝 json 資料中的 key 生成屬性名稱，如果需要自定義，那就修改生成的dart檔案的屬性值，然後點選這裡就都改過來了。

上面用到的兩個外掛都是 Android Studio 的，轉換後還是自查下，防止轉換出現了差錯。

總結

• 手動序列化JSON：比較麻煩，效率低。
• json_serializable：效率高，依舊有些麻煩。
• 工具網站：效率高，更多功能可選。
• 外掛：效率高，使用最方便。