Flutter 高效率JSON轉Model

背景


在開發(fā)過程中芝发,服務端通常返回的是JSON格式的數(shù)據庶艾,對于Web開發(fā)人員(JavaScript、TypeScript)中,可以直接拿到JSON數(shù)據來做我們的邏輯色解。

JSON本身起源于JavaScript痘昌,JavaScript解析處理JSON有天然的優(yōu)勢

但在像 Java钥勋、Dart 等強類型語言中炬转,我們需要將JSON數(shù)據轉模型對象來使用。

  • 一般情況下算灸,我們會使用一些第三方庫來動態(tài)轉化Model,但是Flutter中沒有像Java的GSON/Jackson這類JSON序列化庫扼劈。

  • 因為Flutter中禁用運行時反射。官方解釋是運行時反射會干擾Dart的Tree Shaking,使用Tree Shaking可以在Release版中去除未使用的代碼菲驴,這可以顯著優(yōu)化應用程序的大小荐吵。

  • 由于反射會默認應用到Dart的反射功能,而正因如此也就無法實現(xiàn)動態(tài)化轉Model的功能赊瞬。

序列化的幾種方案


Flutter官方推薦的有兩種序列化方案:https://flutterchina.club/json/

  1. 小項目手動序列化先煎,這種方案比較簡單,比較適合小項目簡單的JSON轉換巧涧,但項目龐大薯蝎,或者多人合作,容易出錯谤绳,也不易維護占锯。

    Flutter有一個內置dart:convert庫
    使用 dart:convert手動序列化JSON
    
  2. 在大中型項目中使用代碼生成,需要用到以下三個依賴包缩筛,通過代碼自動生成的方式消略,生成模型。這種方案易維護瞎抛,由于序列化數(shù)據代碼不再需要手動編寫或者維護艺演,你可以將序列化 JSON 數(shù)據在運行時的異常風險降到最低;

轉換流程


  1. 在pubspec.yaml中添加依賴
json_annotation: ^3.1.0
json_serializable: ^3.5.0
build_runner: ^1.0.0

[圖片上傳失敗...(image-b6fc38-1605061601267)]

在Android Stuido中執(zhí)行Pub get

  1. 新建模型類(mode/demo_model.dart)
class DemoModel{
    
}
  1. 在網頁上把后端請求到的JSON數(shù)據轉換成Model:

    https://czero1995.github.io/json-to-model/:網站轉換支持無限層次嵌套復雜對象的轉換

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/904e6b0f3048460cbdd7018b06b67ad3~tplv-k3u1fbpfcp-zoom-1.image
  • 比如將以下JSON數(shù)據復制到網頁上(左邊):
{
  "code": 0,
  "data": {
    "avatar": "xxx.png",
    "id": 7,
    "float":0.1,
    "is_deleted": false,
    "nickname": "nickName",
    "openId": null,
    "phone": "13641418383",
    "store_ids": [1,2],
    "updated": "2020-11-05 11:53:10",
    "more":[{"a":1,"b":"b","c":{"c1":0.2,"c2":2}}]
  }
}
  • 然后轉換成Model數(shù)據(右邊)
import 'package:json_annotation/json_annotation.dart';
part 'demo_model_data.g.dart'; 
@JsonSerializable(explicitToJson: true)
class DemoModelModel {
    DemoModelData data;
    DemoModelModel({
      this.data,
      this.code,
      this.message
    });
    factory DemoModelModel.fromJson(Map<String, dynamic> json) => _$DemoModelModelFromJson(json);
    Map<String, dynamic> toJson() => _$DemoModelModelToJson(this);
}

@JsonSerializable(explicitToJson: true)
class DemoModelData {
    String avatar;
    int id;
    double float;
    bool is_deleted;
    String nickname;
    var openId;
    String phone;
    List<int> store_ids; 
    String updated;
    List<MoreData> more; 
    DemoModelData({
        this.avatar, 
        this.id, 
        this.float, 
        this.is_deleted, 
        this.nickname, 
        this.openId, 
        this.phone, 
        this.store_ids, 
        this.updated, 
        this.more, 
    });
  factory DemoModelData.fromJson(Map<String, dynamic> json) => _$DemoModelDataFromJson(json);
  Map<String, dynamic> toJson() => _$DemoModelDataToJson(this);
}

@JsonSerializable(explicitToJson: true) 
class MoreData{ 
    int a;
    String b;
    CData c;
    MoreData({
        this.a, 
        this.b, 
        this.c, 
    });
    factory MoreData.fromJson(Map<String, dynamic> json) => _$MoreDataFromJson(json);
    Map<String, dynamic> toJson() => _$MoreDataToJson(this);
}

@JsonSerializable(explicitToJson: true) 
class CData{ 
    double c1;
    int c2;
    CData({
        this.c1, 
        this.c2, 
    });
    factory CData.fromJson(Map<String, dynamic> json) => _$CDataFromJson(json);
    Map<String, dynamic> toJson() => _$CDataToJson(this);
}

再將轉換之后的數(shù)據復制出來覆蓋到demo_model.dart文件上

  1. 執(zhí)行build_runner

在項目終端下執(zhí)行命令:

flutter pub run build_runner build

執(zhí)行完成后婿失,會生成demo_model.g.dart文件

整個執(zhí)行流程如下

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bc6bb3edb75410397af822c881b1316~tplv-k3u1fbpfcp-zoom-1.image
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末钞艇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子豪硅,更是在濱河造成了極大的恐慌,老刑警劉巖挺物,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件懒浮,死亡現(xiàn)場離奇詭異,居然都是意外死亡识藤,警方通過查閱死者的電腦和手機砚著,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來痴昧,“玉大人稽穆,你說我怎么就攤上這事「献” “怎么了舌镶?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵柱彻,是天一觀的道長。 經常有香客問我餐胀,道長哟楷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任否灾,我火速辦了婚禮卖擅,結果婚禮上,老公的妹妹穿的比我還像新娘墨技。我一直安慰自己惩阶,他們只是感情好,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布扣汪。 她就那樣靜靜地躺著琳猫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪私痹。 梳的紋絲不亂的頭發(fā)上脐嫂,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天,我揣著相機與錄音紊遵,去河邊找鬼账千。 笑死,一個胖子當著我的面吹牛暗膜,可吹牛的內容都是我干的匀奏。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼学搜,長吁一口氣:“原來是場噩夢啊……” “哼娃善!你這毒婦竟也來了?” 一聲冷哼從身側響起瑞佩,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤聚磺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后炬丸,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瘫寝,經...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年稠炬,在試婚紗的時候發(fā)現(xiàn)自己被綠了焕阿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡首启,死狀恐怖暮屡,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情毅桃,我是刑警寧澤褒纲,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布准夷,位于F島的核電站,受9級特大地震影響外厂,放射性物質發(fā)生泄漏冕象。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一汁蝶、第九天 我趴在偏房一處隱蔽的房頂上張望渐扮。 院中可真熱鬧,春花似錦掖棉、人聲如沸墓律。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽耻讽。三九已至,卻和暖如春帕棉,著一層夾襖步出監(jiān)牢的瞬間针肥,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工香伴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留慰枕,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓即纲,卻偏偏與公主長得像具帮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子低斋,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內容