天天看點

Flutter基礎之Json資料解析

作者:搬磚小碼龍

簡介

在日常開發中,通過網絡請求擷取後端接口傳回一些結構化字元串資料,如json,xml等。前端無法直接使用這些json資料,需要将json格式的字元串轉為可使用的類對象或Dart對象。

與java不同的是,Flutter無法直接生成資料解析類,需要通過第三方工具生成。本文主要介紹在Flutter中如何實作資料解析。

對比

因為Java和Kotlin語言提供有JackSon和Gson序列化類庫,可以直接使用。對于Flutter來說,由于這些序列化庫都需要使用運作時反射,Flutter不支援,是以需要手動實作。

示例:對于字元串“[{ "name": "Jack","age": 19}]”,不同語言的資料類如下。

  1. Java
Flutter基礎之Json資料解析
  1. kotlin
Flutter基礎之Json資料解析
  1. flutter
Flutter基礎之Json資料解析

從三種語言各自生成的資料類對比來看,kotlin最簡單,java手寫也能實作,Flutter的資料類看起來比較複雜,使用的json也隻有兩個屬性,正常開發過程中,對象類的屬性很多,如果手寫過于複雜而且容易出錯。這個時候可以需要借助第三方工具實作。

引入

在Flutter工程的pubspec.yaml檔案中,添加json_annotation和json_serializable對應版本依賴,然後點選編譯工具上的提示 Pub get或者指令行輸入flutter pub get即可導入庫檔案。

Flutter基礎之Json資料解析

基本使用

  1. 在浏覽器中打開json2dart_for_json_serializable網站。
Flutter基礎之Json資料解析
  1. 将接口傳回的json字元串粘貼到左邊輸入框内。然後點選下邊的格式化。生成對應的資料類。
Flutter基礎之Json資料解析
  1. 修改類名。類名支援自定義,預設為Entity,修改完成後,點選下載下傳生成對應的dart檔案,或直接點選複制代碼。
Flutter基礎之Json資料解析
  1. 在我們的項目根目錄下運作:flutter packages pub run build_runner build 指令,生成一個person.g.dart檔案,
Flutter基礎之Json資料解析
  1. 這時一個完整的資料類就完成了。可以電源Person.fromJson直接進行資料解析。
Flutter基礎之Json資料解析

注意事項

需要注意的是:如果修改了資料類中的字段,需要删除person.g.dart檔案,然後運作指令重新生成即可。

總結

本文介紹的是一種Flutter資料類的常用生成方法,當然還有其他生成方法,但是本文介紹的方法是官方推薦的。其他方法有一定的缺陷。推薦大家使用這種方式生成資料類。

本文介紹常見資料解析類的生成使用。為後續實戰打好基礎。對實戰項目感興趣的同學,可以點選關注小編!