Flutter開發之JSON解析

對於JSON格式的數據交互，想必你們不會陌生。JSON(全稱JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式，JSON由於具備易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提高網絡傳輸效率等特性，一般被用在客戶端與服務端的數據交互中。

對於JSON的基本知識，本文不作詳細介紹，讀者能夠自行搜索資料進行學習。

手動解析

手動解析一般應用在一些基本簡單的場合，即數據結構不是很複雜的場景，手動解析JSON是指使用Flutter提供的dart:convert中內置的JSON解碼器。它可以將原始JSON字符串傳遞給json.decode() 方法，而後在返回的Map<String, dynamic>中查找所需的值。 它不須要依賴任何第三方庫，對於小項目來講很方便。

例如，有下面一個接口：https://jsonplaceholder.typic...，它的數據格式以下：

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

因爲上面的數據格式比較簡單，所以咱們可使用手動解析的方式來解析它。

final responseJson = json.decode(response.body);
Map<String, dynamic> newTitle = responseJson ;
print(newTitle['title']);//打印title的值

固然，咱們也能夠新建一個實體類，而後將它解析到實體類中。

final responseJson = json.decode(response.body);
print(responseJson.toString());
Post postBean = Post.fromJson(responseJson);    //Post爲實體類

對於數據結構不是很複雜的時候，使用fromJson來解析字段還好，可是若是數據結構比較複雜的話，手寫fromJson、toJson就不太友好，而且容易出錯。

藉助工具解析

在Android原生開發中，咱們可使用諸如Gson、FastJson等第三方庫來幫助咱們將JSON數據轉成實體類。一樣，在Flutter開發中，咱們也可使用插件或工具來一鍵生成實體類。

例如，下面是豆瓣電影提供的獲取電影列表的一個接口，數據返回的格式以下：

{
count: 10,
start: 25,
total: 250,
subjects: [
{
rating: {
max: 10,
average: 9.1,
details: {

},
stars: "45",
min: 0
},
genres: [
"劇情",
"動做",
"科幻"
],
title: "蝙蝠俠：黑暗騎士",
casts: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp"
},
name_en: "Christian Bale",
name: "克里斯蒂安·貝爾",
alt: "https://movie.douban.com/celebrity/1005773/",
id: "1005773"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp"
},
name_en: "Heath Ledger",
name: "希斯·萊傑",
alt: "https://movie.douban.com/celebrity/1006957/",
id: "1006957"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp"
},
name_en: "Aaron Eckhart",
name: "艾倫·艾克哈特",
alt: "https://movie.douban.com/celebrity/1053577/",
id: "1053577"
}
],
durations: [
"152分鐘"
],
collect_count: 813292,
mainland_pubdate: "",
has_video: true,
original_title: "The Dark Knight",
subtype: "movie",
directors: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp"
},
name_en: "Christopher Nolan",
name: "克里斯托弗·諾蘭",
alt: "https://movie.douban.com/celebrity/1054524/",
id: "1054524"
}
],
pubdates: [
"2008-07-14(紐約首映)",
"2008-07-18(美國)"
],
year: "2008",
images: {
small: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
large: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
medium: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp"
},
alt: "https://movie.douban.com/subject/1851857/",
id: "1851857"
},
title: "豆瓣電影Top250"
}

若是咱們使用fromJson、toJson來進行解析的話，就比較麻煩，而且還容易出錯，所以咱們使用一些工具來輔助進行JSON解析。

在線生成

首先，打開JSON to Dart，以下圖所示。

而後，咱們將接口返回的JSON數據拷貝到輸入框中，點擊建立Dart類，而後右邊就是生成好的Dart代碼。

而後，建立一個Dart實體類，將上面生成的實體類代碼拷貝過去便可。不過，我在使用此種方式進行JSON解析的時候，遇到一個問題，

Cannot generate dart code. Please check the project caveats.

以下圖：

至於產生的緣由我也不是很是清楚，有知道的能夠解釋下。

FlutterJsonBeanFactory插件

除了上面的方式外，咱們還可使用FlutterJsonBeanFactory插件來輔助生成Bean類。
安裝FlutterJsonBeanFactory插件很簡單，以Android Studio爲例，依次選擇【Android Studio】->【Preferences…】->【Plugins】，而後搜索FlutterJsonBeanFactory插件安裝便可，以下圖所示。

安裝成功以後重啓Android Studio便可，重啓以後在new 的時候就會多一個【 dart bean class File from Json】選項，以下圖所示。

而後，在項目的lib目錄下右鍵並選擇【new】->【dart bean class File from JSON】來建立一個實體類，以下圖。

而後，點擊【Make】按鈕就能夠生成一個dart實體類，以下圖。

能夠發現，使用JSON轉換插件來輔助開發，對於Flutter開發是很是方便的。除了FlutterJsonBeanFactory插件，另外一款FlutterJsonHelper也能夠完成JSON轉換爲Entity實體類的任務。

須要說明的是，生成實體類時，類名後面的entity是自動加上去的，能夠在設置中配置自定義名稱，以下圖。

而後，咱們就可使用dio庫或者httpclient來請求接口，並將它轉換到moviesentity實體類上，以下所示：

//獲取電影列表
void getFilmList() async {
    Dio dio = new Dio();
    Response response=await dio.get(hotMovies);
    print('電影數據：'+response.toString());

    Map userMap = json.decode(response.toString());
    var movies = new MoviesEntity.fromJson(userMap);
  }