JSON 是我們開發中最常使用的一種資料格式，這篇文章中，我們主要看看在開發中最常見的幾種格式的 JSON 資料在 Flutter 中的解析：
以下案例中，我們都會將json檔案放到本地，也就是 assets 檔案中，然後從本地讀取這些檔案進行解析。
如我們需要讀取 assets/person.json :
那麼就需要在 pubspec.yaml 中做如下配置：
flutter:
uses-material-design: true
# 資原始檔配置
assets:
- assets/person.json
複製程式碼下面我們就來解析一些常見的 Json 格式的資料。
如果對 Dart 基礎還不是很瞭解，可以先看看這篇文章 Dart 基礎入門
簡單的物件解析
定義一個 person.json 如下：
{
"name": "jack",
"age": 18,
"height": 175.0
}
複製程式碼和在 Java 裡面一樣，我們首先需要構建一個 Person 的實體類，如下：
class Person {
String name;
int age;
double height;
Person({this.name, this.age, this.height});
factory Person.fromJson(Map<String, dynamic> json) {
return Person(name: json['name'], age: json['age'], height: json['height']);
}
}
複製程式碼接著，我們在建立一個 person_service.dart 來解析 person.json。
該類中需要匯入如下幾個依賴庫：
// 使用該庫中的 rootBundle 物件來讀取 perosn.json 檔案
import 'package:flutter/services.dart';
// json
import 'dart:convert';
// 非同步 Future
import 'dart:async';
複製程式碼person_service.dart
import 'package:flutter/services.dart';
import 'dart:convert';
import 'dart:async';
import '../models/person.dart';
// 讀取 assets 資料夾中的 person.json 檔案
Future<String> _loadPersonJson() async {
return await rootBundle.loadString('assets/person.json');
}
// 將 json 字串解析為 Person 物件
Future<Person> decodePerson() async {
// 獲取本地的 json 字串
String personJson = await _loadPersonJson();
// 解析 json 字串，返回的是 Map<String, dynamic> 型別
final jsonMap = json.decode(personJson);
print('jsonMap runType is ${jsonMap.runtimeType}');
Person person = Person.fromJson(jsonMap);
print(
'person name is ${person.name}, age is ${person.age}, height is ${person.height}');
return person;
}
複製程式碼輸入如下：
flutter: jsonMap runType is _InternalLinkedHashMap<String, dynamic>
flutter: person name is jack, age is 18, height is 175.0
複製程式碼可以看出 json.decode(personJson) 方法返回的型別為 _InternalLinkedHashMap<String, dynamic> ,意思就是這個 Map 的 key 為 String 型別，而 value 的型別為 dynamic 的，也就是動態的，就如 person.json 中，key 都是 String 型別的，但是 value 可能是 String 、int、double 等等型別。
包含陣列的物件
定義一個 country.json 如下：
{
"name": "China",
"cities": [
"Beijing",
"Shanghai"
]
}
複製程式碼實體類如下：
class Country {
String name;
List<String> cities;
Country({this.name, this.cities});
factory Country.fromJson(Map<String, dynamic> json) {
return Country(name: json['name'], cities: json['cities']);
}
}
複製程式碼Service 類如下：
import 'dart:async';
import 'package:flutter/services.dart';
import 'dart:convert';
import '../models/country.dart';
Future<String> _loadCountryJson() async {
return await rootBundle.loadString('assets/country.json');
}
Future<Country> decodeCountry() async {
String countryJson = await _loadCountryJson();
Map<String, dynamic> jsonMap = json.decode(countryJson);
Country country = Country.fromJson(jsonMap);
print('country name is ${country.name}');
return country;
}
複製程式碼然後我們在 main() 中去呼叫 decodeCountry() 執行，報錯了...
Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'List<String>'
...
複製程式碼錯誤日誌說 List<dynamic> 不是 List<String> 的子型別，也就是我們在country的實體類中直接給 cities 屬性賦值為 cities: json['cities']，我們先來看看 json['cities'] 是什麼型別：
factory Country.fromJson(Map<String, dynamic> json) {
print('json["cities"] type is ${json['cities'].runtimeType}');
return Country(name: json['name'], cities: json['cities']);
}
複製程式碼輸出如下：
flutter: json["cities"] type is List<dynamic>
複製程式碼這個時候我們需要將 Country.fromJson(...) 方法作如下更改：
factory Country.fromJson(Map<String, dynamic> json) {
print('json["cities"] type is ${json['cities'].runtimeType}');
var originList = json['cities'];
List<String> cityList = new List<String>.from(originList);
return Country(name: json['name'], cities: cityList);
}
複製程式碼上述程式碼中，我們建立了一個 List<String> 型別的陣列，然後將 List<dynamic> 陣列中的元素都新增到了 List<String> 中。輸出如下：
flutter: json["cities"] type is List<dynamic>
flutter: country name is China
複製程式碼物件巢狀
定義一個 shape.json ，格式如下：
{
"name": "rectangle",
"property": {
"width": 5.0,
"height": 10.0
}
}
複製程式碼實體如下：
class Shape {
String name;
Property property;
Shape({this.name, this.property});
factory Shape.fromJson(Map<String, dynamic> json) {
return Shape(name: json['name'], property: json['property']);
}
}
class Property {
double width;
double height;
Property({this.width, this.height});
factory Property.fromJson(Map<String, dynamic> json) {
return Property(width: json['width'], height: json['height']);
}
}
複製程式碼Service 類如下：
import 'dart:async';
import 'dart:convert';
import 'package:flutter/services.dart';
import '../models/shape.dart';
Future<String> _loadShapeJson() async {
return await rootBundle.loadString('assets/shape.json');
}
Future<Shape> decodeShape() async {
String shapeJson = await _loadShapeJson();
Map<String, dynamic> jsonMap = json.decode(shapeJson);
Shape shape = Shape.fromJson(jsonMap);
print('shape name is ${shape.name}');
return shape;
}
複製程式碼執行之後，會報如下錯誤：
Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Property'
複製程式碼也就是說 property: json['property'] 這裡賦值的型別是 _InternalLinkedHashMap<String, dynamic> 而不是 Property，json['property'] 的值是這樣的 {width: 5.0, height: 10.0}，它是一個 Map ，並不是一個 Property 物件，我們需要先將這個 Map 轉化為物件，然後在賦值：
factory Shape.fromJson(Map<String, dynamic> json) {
print('json["property"] is ${json['property']}');
Property property = Property.fromJson(json['property']); // new line
return Shape(name: json['name'], property: property);
}
複製程式碼輸出：
shape name is rectangle
複製程式碼複雜的物件陣列巢狀
{
"id": "0302",
"class_name": "三年二班",
"students": [
{
"name": "葉湘倫",
"sex": "男"
},
{
"name": "路小雨",
"sex": "女"
}
]
}
複製程式碼實體：
class ClassInfo {
String id;
String name;
List<Student> studentList;
ClassInfo({this.id, this.name, this.studentList});
factory ClassInfo.fromJson(Map<String, dynamic> json) {
return ClassInfo(
id: json['id'],
name: json['class_name'],
studentList: json['students']);
}
}
class Student {
String name;
String sex;
Student({this.name, this.sex});
factory Student.fromJson(Map<String, dynamic> json) {
return Student(name: json['name'], sex: json['sex']);
}
}
複製程式碼service:
import 'dart:async';
import 'dart:convert';
import 'package:flutter/services.dart';
import '../models/class_info.dart';
Future<String> _loadClassInfoJson() async {
return await rootBundle.loadString('assets/class_info.json');
}
Future<ClassInfo> decodeClassInfo() async {
String classInfoJson = await _loadClassInfoJson();
Map<String, dynamic> jsonMap = json.decode(classInfoJson);
ClassInfo classInfo = ClassInfo.fromJson(jsonMap);
classInfo.studentList
.forEach((student) => print('student name is ${student.name}'));
return classInfo;
}
複製程式碼上述程式碼在執行後還是會報錯：
Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'List<Student>'
複製程式碼同樣，還是在 studentList: json['students'] 出問題了，我們把 json['students'] 的輸出來看看：
[{name: 葉湘倫, sex: 男}, {name: 路小雨, sex: 女}]
複製程式碼上述結果的型別為 List<dynamic> 。現在我們需要將 List<dynamic> 轉換到一個 List<Student> 型別的陣列中，這裡需要用到一個操作符 map，map 操作符的作用就是將某種型別轉換為另一種型別。如下：
factory ClassInfo.fromJson(Map<String, dynamic> json) {
final originList = json['students'] as List;
List<Student> studentList =
originList.map((value) => Student.fromJson(value)).toList();
return ClassInfo(
id: json['id'], name: json['class_name'], studentList: studentList);
}
複製程式碼輸出：
flutter: student name is 葉湘倫
flutter: student name is 路小雨
複製程式碼單純的陣列
member.json
[
{
"id": 1,
"name": "Jack"
},
{
"id": 2,
"name": "Rose"
},
{
"id": 3,
"name": "Karl"
}
]
複製程式碼實體：
class MemberList {
List<Member> memberList;
MemberList({this.memberList});
factory MemberList.fromJson(List<dynamic> listJson) {
List<Member> memberList =
listJson.map((value) => Member.fromJson(value)).toList();
return MemberList(memberList: memberList);
}
}
class Member {
int id;
String name;
Member({this.id, this.name});
factory Member.fromJson(Map<String, dynamic> json) {
return Member(id: json['id'], name: json['name']);
}
}
複製程式碼因為 member.json 是一個單純的陣列，所以上述程式碼中我們建立了一個 MemberList 類來將這個 Member 陣列包含起來。
注意下上述程式碼中 MemberList.fromJson(...) 中的寫法。
service:
import 'dart:async';
import 'package:flutter/services.dart';
import 'dart:convert';
import '../models/member.dart';
Future<String> _loadMemberJson() async {
return await rootBundle.loadString('assets/member.json');
}
Future<MemberList> decodeMemberList() async {
String memberListJson = await _loadMemberJson();
List<dynamic> list = json.decode(memberListJson);
MemberList memberList = MemberList.fromJson(list);
memberList.memberList
.forEach((member) => print('member name is ${member.name}'));
return memberList;
}
複製程式碼輸出：
flutter: member name is Jack
flutter: member name is Rose
flutter: member name is Karl
複製程式碼複雜的 Json 解析
之前的文章 Flutter 中 ListView 的使用 中用到了 豆瓣API ，這個 API 中返回的資料包含了當前熱播的電影，大家嘗試著按需解析一下吧 ！！！
如有錯誤，還請指出。謝謝！！！
參考連結：