發現了一個 Flutter json 資料自動轉 model 的極簡方式 ｜8月更文挑戰

頭疼腦脹的程式碼搬運工發表於2021-08-07
FlutterJSON

這是我參與8月更文挑戰的第1天，活動詳情檢視：8月更文挑戰

廢話開篇：一般在網路資料請求的時候json資料會解析成model，這樣方便開發是進行資料傳遞及賦值，但是平時大家都會在定義完model後通過一些第三方或者作為大牛的你獨立開發的json轉model工具實現快速開發，但是model裡面的屬性或許還是要一個個的碼出來。下面整理一下如何自動的、全套的、一步到位程式碼都不需要寫的實現json自動轉model。

步驟一、載入flutter外掛

在pubspec.yaml 下新增如下依賴


//工程依賴
dependencies:
  flutter:
    sdk: flutter
    
  //json解析工具
  json_annotation: ^3.0.1
複製程式碼

//工程開發依賴
dev_dependencies:
  flutter_test:
    sdk: flutter
  
  //工程開發依賴（自動生成model檔案）
  build_runner: ^1.7.3
  json_serializable: ^3.2.5
複製程式碼

好了，執行以下命令列來載入一下上述第三方。

flutter packages get
複製程式碼

image.png

步驟二、通過json資料自動生成model檔案

訪問這個網址 caijinglong.github.io/json2dart/i… ，通過json格式資料直接生成model檔案。

image.png

好了，直接把下載好的dart檔案複製到工程裡。

image.png

步驟三、model類飄紅，執行終端命令自動完成model類解析操作。

當把下載好的model.dart 檔案複製到工程裡後它是會飄紅的，所以，這裡再需要執行一下最上面工程所需的開發依賴終端命令

flutter packages pub run build_runner build    
複製程式碼

執行完畢後，會在之前複製下來的model.dart下面建立一個新檔案。

image.png

好了，現在完成了。

tip:這裡需要注意的是由於flutter 對屬性的使用是有安全判斷的，所以會導致一些屬性後面需要新增"?"來標註它，個人理解的意思就程式必須知道“它”到底有沒有值，如果沒有值就可能出錯，當然這個機制在最新的語言中都能發現影子。

步驟四、如何使用它？

//這裡加了一個名稱空間加以區分
import 'package:first_flutter_app/steel/Model/article_wsl.dart' as ArticleModel;
複製程式碼
//非同步載入文章資料
Future<List> _loadArticle() async {
  dynamic articleResult = await WSLHttpRequest.request(this._articleUrl,params: this._articleParam);
  
  //自動解析成model，因為好多json裡面的欄位會相同，這裡加了一個名稱空間加以區分。
  ArticleModel.ArticleWsl articleWsl = ArticleModel.ArticleWsl.fromJson(articleResult);
  if(_isNormalChannel == true) {
    _cursor = articleWsl.nextCursor.toString();
  }
  return articleWsl.data as List;
}
複製程式碼

好了，這裡沒有寫任何程式碼，直接結束了繁瑣的json解析過程，程式碼拙劣，大神勿噴，如果對大家有幫助，更是深感欣慰。

相關文章