Flutter 請求介面以及DAO層的實現
摘要：
Flutter 中除了佈局還有最重要的網路及資料操作.
Flutter的model層如何實現?
class HomeModel {
final ConfigModel config;
final List<CommonModel> ban...
Flutter 中除了佈局還有最重要的網路及資料操作.
Flutter的model層如何實現?
class HomeModel {
final ConfigModel config;
final List<CommonModel> bannerList;
final List<CommonModel> localNavList;
final GridNavModel gridNav;
final List<CommonModel> subNavList;
HomeModel(
{this.config,
this.bannerList,
this.localNavList,
this.gridNav,
this.subNavList});
Map<String, dynamic> toJson() {
return {
'config': config,
'bannerList': bannerList,
'localNavList': localNavList,
'gridNav': gridNav,
'subNavList': subNavList,
};
}
factory HomeModel.fromJson(Map<String, dynamic> json) {
var localNavListJson = json['localNavList'] as List; //轉換為list
List<CommonModel> localNavList = localNavListJson
.map((i) => CommonModel.fromJson(i))
.toList(); //然後將list 轉換為對應
var bannerListJson = json['bannerList'] as List; //轉換為list
List<CommonModel> bannerList = bannerListJson
.map((i) => CommonModel.fromJson(i))
.toList(); //然後將list 轉換為對應
var subNavListJson = json['subNavList'] as List; //轉換為list
List<CommonModel> subNavList = subNavListJson
.map((i) => CommonModel.fromJson(i))
.toList(); //然後將list 轉換為對應
return HomeModel(
config: ConfigModel.fromJson(json['config']),
bannerList: bannerList,
localNavList: localNavList,
gridNav: GridNavModel.formJson(json['gridNav']),
subNavList: subNavList,
);
}
}
如果用到了其他的model例項,需要實現fromJson
class CommonModel {
final String icon;
final String title;
final String url;
final String statusBarColor;
final bool hideAppBar;
CommonModel(
{this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});
/// 需要轉換為json字串時需要此方法
Map<String, dynamic> toJson() {
return {
'icon': icon,
'title': title,
'url': url,
'statusBarColor': statusBarColor,
'hideAppBar': hideAppBar,
};
}
///獲取CommonModel的例項
factory CommonModel.fromJson(Map<String, dynamic> json) {
return CommonModel(
icon: json['icon'],
title: json['title'],
url: json['url'],
statusBarColor: json['statusBarColor'],
hideAppBar: json['hideAppBar']);
}
}
Flutter 請求網路獲取返回的資料
需要匯入幾個包
import 'dart:async'; import 'dart:convert'; import 'package:http/http.dart' as http; //給某個包設定一個別名
非同步獲取網路返回的資料
import 'package:prim_fultter_app/model/home_model.dart';
const Home_URL = "http://www.devio.org/io/flutter_app/json/home_page.json";
//首頁介面
class HomeDao {
static Future<HomeModel> fetch() async {
final response = await http.get(Home_URL);
if (response.statusCode == 200) {
//判斷介面是否返回成功
Utf8Decoder utf8decoder = Utf8Decoder(); //解決中文亂碼的問題
var result = json.decode(utf8decoder.convert(response.bodyBytes)); //解碼
return HomeModel.fromJson(result);
} else {
throw Exception('load url fail!');
}
}
}
獲取結果的幾種方式
Future<Null> loadData() async {
//一種方式
//HomeDao.fetch().then((result) {
////轉換json字串
//resultString = json.encode(result.config);//將model轉換為json字串
//print("homeDao:" + resultString);
//}).catchError((e) {
//resultString = e.toString();
//print("homeDao:" + resultString);
//});
//另一種方式
try {
HomeModel model = await HomeDao.fetch();
resultString = json.encode(model);//將model轉換為json字串
print("homeDao:" + resultString);
} catch (e) {
print(e.toString());
}
return null;
}