一橙弱、網(wǎng)絡(luò)請求和數(shù)據(jù)解析
Future: 是與異步操作一起工作的核心類歧寺，它表示未來某個(gè)時(shí)間可能出現(xiàn)的可用值或錯(cuò)誤
http.Response 包含一個(gè)成功的http拿到的請求數(shù)據(jù)
- 如何用http庫做Get請求
- 如何用http庫做Post請求
- 如何將response轉(zhuǎn)換成Dart Object
- 如何將請求結(jié)果展示在界面上
1.準(zhǔn)備網(wǎng)絡(luò)數(shù)據(jù)和下載依賴
前后端分離燥狰，做測試很方便
相關(guān)網(wǎng)站
打開Dart.page 搜索 http
https://pub.dev
https://pub.dev/packages/http
導(dǎo)入工程
- 包服務(wù)于 Dart-
- 插件依賴于原生
flutter 導(dǎo)入package
image
安裝依賴
#cd 到根目錄執(zhí)行以下代碼
flutter packages get
2.使用http 請求數(shù)據(jù)
1.導(dǎo)入http package
import 'dart:convert';//數(shù)據(jù)解析和模型互轉(zhuǎn)
import 'package:http/http.dart' as http;//http庫
2.請求數(shù)據(jù)(getDatas)
Future<List<Chat>> getDatas() async {
//await 等到 http.get 拿到響應(yīng)之后再執(zhí)行其他代碼
final response = await http.get('http://rap2api.taobao.org/app/mock/225870/api/chat/list');
if (response.statusCode == 200){
//獲取響應(yīng)數(shù)據(jù)，并且轉(zhuǎn)換成Map類型
final responseBody = json.decode(response.body);
//轉(zhuǎn)換模型數(shù)組
List<Chat> chatList = responseBody['chat_list']
.map<Chat>((item) => Chat.fromJson(item))
.toList();
//print('chatList$chatList');
return chatList;
}else {
throw Exception('statusCode:${response.statusCode}');
}
}
3.json -> Map -> 模型
- 小型項(xiàng)目：手動序列化
- 大型項(xiàng)目：借助插件：
json_serializable和built_value
簡單數(shù)據(jù)解析
final chat = {
'name' : '張三',
'message' : '吃飯了嗎斜筐？',
};
//map 轉(zhuǎn)json
final chatJson = json.encode(chat);
print('chat_json:$chatJson');//chat_json:{"name":"張三","message":"吃飯了嗎龙致？"}
//json 轉(zhuǎn) map
final newChat = json.decode(chatJson);
print(newChat is Map);
print('newChat:$newChat');//newChat:{name: 張三, message: 吃飯了嗎？}
//map 轉(zhuǎn)模型
Chat chatModel = Chat.fromJson(newChat);
print('name:${chatModel.name} message:${chatModel.message}');
Chat 模型
class Chat {
final String name;
final String message;
final String imageUrl;
Chat({this.name, this.message, this.imageUrl});
//類似于initWithJson
factory Chat.fromJson(Map json) {
return Chat(
name: json['name'],
message: json['message'],
imageUrl: json['imageUrl'],
);
}
}
復(fù)雜JSON解析
復(fù)雜JSON解析
改成Final
改成Final
在線Json轉(zhuǎn)Dart
{
"status": true,
"msg": {
"id": 399,
"name": "Steven"
}
}
https://javiercbk.github.io/json_to_dart/
顯示效果如圖下
在線Json轉(zhuǎn)Dart
二顷链、利用FutureBuilder渲染界面
- AsyncSnapshot 異步快照
- snapShot.connectionState 連接狀態(tài) waiting 和 done
- ListTile ->列表平鋪頁
const ListTile({
Key key,
this.leading, // item 前置圖標(biāo)
this.title, // item 標(biāo)題
this.subtitle, // item 副標(biāo)題
this.trailing, // item 后置圖標(biāo)
this.isThreeLine = false, // item 是否三行顯示
this.dense, // item 直觀感受是整體大小
this.contentPadding, // item 內(nèi)容內(nèi)邊距
this.enabled = true,
this.onTap, // item onTap 點(diǎn)擊事件
this.onLongPress, // item onLongPress 長按事件
this.selected = false, // item 是否選中狀態(tài)
})
關(guān)鍵代碼
body: FutureBuilder(
future: getDatas(),
builder: (BuildContext context,AsyncSnapshot snapShot){
print('data:${snapShot.data}');
print('connectionState:${snapShot.connectionState}');
if(snapShot.connectionState == ConnectionState.waiting){
return Text('Loading...');
}else {
return ListView(
children: snapShot.data.map<Widget>(
(item){
return ListTile(
title: Text(item.name),
subtitle: Container(height: 20,width: 20,child: Text(item.message,overflow: TextOverflow.ellipsis,),),
leading: CircleAvatar(
backgroundImage: NetworkImage(item.imageUrl),
),
);
}
).toList(),
);
}
},
)
效果圖
FutureBuilder
