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

時間 2020-07-06

標籤 flutter notes quicktype 解析 json 就是 easy 欄目 JavaScript 简体版

原文原文鏈接

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

前言

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

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

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

說一下本文重點：ui

其實就是拿到接口返回 json 串，複製 quicktype 中，獲取生成的 bean 便可。

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

目的：spa

我的記錄，微薄之力幫助有須要的小夥伴～

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

神器登場

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

那麼，有沒有一個神器，可讓相似我同樣 0 基礎的開發者，垂手可得解析 json 呢？cdn

閃亮登場：

quicktype

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

按需選擇對應操做：

測試環節

因爲關鍵解析實體仍是經過 quicktype 生成，這裏簡單的舉個例子，讓咱們一塊兒來看，解析 json，到底多麼 easy～

1、簡單的 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)));
  },
),
複製代碼

效果以下：

2、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)),
      };
}
複製代碼

效果以下：