在開發(fā)中，我們經(jīng)常會(huì)使用本地JSON或者從服務(wù)器請(qǐng)求數(shù)據(jù)后回去到JSON西雀，拿到JSON后通常會(huì)將JSON轉(zhuǎn)成Model對(duì)象來進(jìn)行后續(xù)的操作，因?yàn)檫@樣操作更加的方便，也更加的安全渡贾。
所以學(xué)習(xí)JSON的相關(guān)操作以及讀取JSON后如何轉(zhuǎn)成Model對(duì)象對(duì)于Flutter開發(fā)也非常重要碍扔。
1. JSON資源配置
JSON也屬于一種資源狠轻，所以在使用之前需要先進(jìn)行相關(guān)的配置
image.png
JSON文件內(nèi)容：
[{
"nickName": "李明",
"roomName": "8801",
"roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
},
{
"nickName": "王小",
"roomName": "8802",
"roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
},
{
"nickName": "張三",
"roomName": "8803",
"roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
}
]
2. JSON讀取解析
2.1 JSON資源讀取
如果我們希望讀取JSON資源服猪，可以使用package:flutter/services.dart包中的rootBundle。
在rootBundle中有一個(gè)loadString方法渣磷，可以去加載JSON資源
- 但是注意婿着，查看該方法的源碼，你會(huì)發(fā)現(xiàn)這個(gè)操作是一個(gè)異步的
2.2 JSON字符串轉(zhuǎn)化
拿到JSON字符串后醋界，我們需要將其轉(zhuǎn)成成我們熟悉的List和Map類型竟宋。
我們可以通過dart:convert包中的json.decode方法將其進(jìn)行轉(zhuǎn)化
Future<List<Anchor>> getAnchors() async {
//1. 讀取json文件
String jsonString = await rootBundle.loadString("assets/test.json");
//2.轉(zhuǎn)成List或Map類型
final jsonResult = json.decode(jsonString);
//遍歷List，并且轉(zhuǎn)成Anchor對(duì)象放到另一個(gè)List中
List<Anchor> anchors = new List();
for(Map<String,dynamic> map in jsonResult) {
anchors.add(Anchor.withMap(map));
}
return anchors;
}
2.3 對(duì)象Model定義
將JSON轉(zhuǎn)成了List和Map類型后物独，就可以將List中的一個(gè)個(gè)Map轉(zhuǎn)成Model對(duì)象袜硫，所以我們需要定義自己的Model
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';
class Anchor {
String nickName;
String roomName;
String imageUrl;
Anchor({
this.nickName,
this.roomName,
this.imageUrl
});
Anchor.withMap(Map<String,dynamic> parseMap) {
this.nickName = parseMap["nickName"];
this.roomName = parseMap["roomName"];
this.imageUrl = parseMap["roomSrc"];
}
Future<List<Anchor>> getAnchors() async {
//1. 讀取json文件
String jsonString = await rootBundle.loadString("assets/test.json");
//2.轉(zhuǎn)成List或Map類型
final jsonResult = json.decode(jsonString);
//遍歷List氯葬，并且轉(zhuǎn)成Anchor對(duì)象放到另一個(gè)List中
List<Anchor> anchors = new List();
for(Map<String,dynamic> map in jsonResult) {
anchors.add(Anchor.withMap(map));
}
return anchors;
}
@override
String toString() {
return "$nickName - $roomName : $imageUrl";
}
}
3. JSON解析代碼
這里我單獨(dú)創(chuàng)建了一個(gè)anchor.dart的文件挡篓，在其中定義了所有的相關(guān)代碼：
- 之后外界只需要調(diào)用我內(nèi)部的getAnchors就可以獲取到解析后的數(shù)據(jù)了
import 'package:flutter/material.dart';
import 'anchor.dart';
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("HelloWorld"),
),
body: MyHomeBody(),
),
);
}
}
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
var future = Anchor().getAnchors();
future.then((value) {
print(value.toString());
}).catchError((error) {
// 捕獲出現(xiàn)異常時(shí)的情況
print(error);
});
return Center(child: Text("json文件讀取"));
}
}
image.png
學(xué)習(xí)內(nèi)容來自Flutter從入門到實(shí)戰(zhàn)
