Flutter Notes ｜quicktype 解析 json 就是這麼 easy～

刪除按下的那一刻，曾經的一切，終將消逝，煙消雲散，了無痕跡。

前言

起初，剛入坑 Flutter，拿到後臺返回 json 串，整個人是比較懵逼的。

回想起 Android，從開始的 JsonArray、JsonObject，直到最後的 Gson，使用起來簡直爽的嗨起～

而面對 Flutter 的解析 json，真的讓我頭大，倒不是有多難，而是沒找對方式方法。

說一下本文重點：

• 其實就是拿到介面返回 json 串，複製 quicktype 中，獲取生成的 bean 即可。

文末已附上鍊接，不想看水文的小夥伴可直接拉到底，上手 0 基礎。

目的：

• 個人記錄，微薄之力幫助有需要的小夥伴～

本文 json 對標網上找的一篇不錯的 Flutter Json 處理的文章，文末已附上鍊接。

僅僅是個輔助工具，不包含對應的異常處理，畢竟，沒學會走，就想跑？啥事兒不得慢慢來嗎。

神器登場

雖然 Flutter 提供了 dart:convert 庫，讓我們無縫解析 json，但是實際上對於我一樣的小白，尤其剛剛入坑的小白，上手程度還是有點費力。

那麼，有沒有一個神器，可以讓類似我一樣 0 基礎的開發者，輕而易舉解析 json 呢？

閃亮登場：

• quicktype

官網點選右上角，選擇 open quicktype：

按需選擇對應操作：

測試環節

由於關鍵解析實體還是通過 quicktype 生成，這裡簡單的舉個例子，讓我們一起來看，解析 json，到底多麼 easy～

一、簡單的 json 串

要解析的 json 串如下：

{
  "id":"201314",
  "name":"HLQ_Struggle",
  "score" : 100
}

對應拷貝 quicktype 獲取對應實體類：

// To parse this JSON data, do
//
//     final student = studentFromJson(jsonString);

import 'dart:convert';

Student studentFromJson(String str) => Student.fromJson(json.decode(str));

String studentToJson(Student data) => json.encode(data.toJson());

class Student {
    Student({
        this.id,
        this.name,
        this.score,
    });

    String id;
    String name;
    int score;

    factory Student.fromJson(Map<String, dynamic> json) => Student(
        id: json["id"],
        name: json["name"],
        score: json["score"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "score": score,
    };
}

使用賊方便，例如解析當前這個 json：

GestureDetector(
  child: _buildItemText('普通 json 解析'),
  onTap: () {
    showToast(studentFromJson(studentJson).name);
  },
),

效果如下：

而普通實體轉 json 也很 easy（當然這裡我偷個懶）：

GestureDetector(
  child: _buildItemText('普通 Bean 轉 json'),
  onTap: () {
    showToast(studentToJson(studentFromJson(studentJson)));
  },
),

效果如下：

二、json 包含陣列

先來看下我們的 json 串：

{
  "city": "張家口",
  "streets": [
    "尚義",
    "張北"
  ]
}

同樣丟到 quicktype 獲取最終的實體類：

import 'dart:convert';

Address addressFromJson(String str) => Address.fromJson(json.decode(str));

String addressToJson(Address data) => json.encode(data.toJson());

class Address {
  Address({
    this.city,
    this.streets,
  });

  String city;
  List<String> streets;

  factory Address.fromJson(Map<String, dynamic> json) => Address(
        city: json["city"],
        streets: List<String>.from(json["streets"].map((x) => x)),
      );

  Map<String, dynamic> toJson() => {
        "city": city,
        "streets": List<dynamic>.from(streets.map((x) => x)),
      };
}

效果如下：

內容較為簡潔，就不一一展示了～

推薦使用～

Thanks

• quicktype
• Parsing complex JSON in Flutter