本篇教程聊一聊flutter中http的坑蝌麸,閱讀本教程之前假設(shè)你已經(jīng)掌握了flutter的一些基礎(chǔ)知識,比如環(huán)境搭建,簡單的dart語法咆槽,及flutter組件化思想。
因為我是前端圈纺,所以數(shù)據(jù)交互邏輯都是以前端的思想設(shè)計秦忿,如果有不對的地方,歡迎大家指正赠堵。
先看效果圖
整個頁面就是一個長list新聞列表小渊,后臺是自己用django寫的,數(shù)據(jù)是python爬的茫叭,我們先寫一個新聞的模板酬屉,效果如圖:
我們先新建一個模板的文件News.dart,代碼如下:
import 'package:flutter/material.dart';
class News extends StatefulWidget {
final String title,imglink;
News(this.title,this.imglink);
@override
createState() => new NewsState();
}
class NewsState extends State<News> {
@override
Widget build(BuildContext context){
return new Center(
child:new Container(
height: 120.0,
padding:new EdgeInsets.only(left:20.0,right:20.0),
decoration: new BoxDecoration(
border:new Border(
bottom: new BorderSide(width: 1.0,color:const Color(0xff999999))
)
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Expanded(
flex:2,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:MainAxisAlignment.spaceBetween ,
children: <Widget>[
new Container(
padding:new EdgeInsets.only(top:15.0),
decoration: new BoxDecoration(
),
child:new Text(
widget.title,
style: new TextStyle(
fontSize: 18.0
),
),
),
new Container(
padding:const EdgeInsets.only(right:13.0,bottom:15.0),
decoration: new BoxDecoration(
),
child:new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'本地新聞',
),
new Text(
'2018-03-11',
),
],
)
),
],
),
),
new Expanded(
flex:1,
child: new Image.network(
widget.imglink,
scale: 1.0,
fit: BoxFit.cover,
),
),
],
),
),
);
}
}
關(guān)于這個模板頁面,前面有教程揍愁,大家可以自行前去淺嘗flutter中的flex布局查看
現(xiàn)在開始重點呐萨,我們在flutter中進行網(wǎng)絡(luò)請求,首先到導(dǎo)入兩個包:
import 'dart:io';
import 'dart:convert';
so
import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
然后異步請求數(shù)據(jù)莽囤,代碼如下:
List<Map <String,String>> newTitle=[];
_get() async {
var responseBody;
var url='http://127.0.0.1:8000/yt/getapp/';
var httpClient = new HttpClient();
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == 200) {
responseBody = await response.transform(utf8.decoder).join();
responseBody=JSON.decode(responseBody);
}else{
print("error");
}
await responseBody['msg'].map((Map item){
newTitle.add(item);
}).toList();
}
整個邏輯也不會麻煩谬擦,所以全部代碼如下:
import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
class TabPage3 extends StatefulWidget {
@override
createState() => new TabPage3States();
}
class TabPage3States extends State<TabPage3> {
@override
Widget build(BuildContext context) {
List<Map <String,String>> newTitle=[];
_get() async {
var responseBody;
var url='http://127.0.0.1:8000/yt/getapp/';
var httpClient = new HttpClient();
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == 200) {
responseBody = await response.transform(utf8.decoder).join();
responseBody=JSON.decode(responseBody);
}else{
print("error");
}
await responseBody['msg'].map((Map item){
newTitle.add(item);
}).toList();
}
_get();
return new ListView(
children: newTitle.map((Map item){
return new News(item['title'],item['imglinks']);//News接收2個參數(shù)(標(biāo)題和圖片url)
}).toList(),
);
}
}
這樣run的話,肯定會拋錯的朽缎,第一個坑:
var url='http://127.0.0.1:8000/yt/getapp/';
這個接口是我自己用django寫的惨远,ajax測試完全沒有問題,但是在在模擬器上會報一個莫名其妙的錯誤话肖,我明明是8000端口北秽,它報錯38588有毛病:
莫名其妙的錯誤讓人防不勝防最筒,但是我也不是一個錯誤就能嚇到的贺氓,經(jīng)過我多方查資料,大概意思就是Android底層是Linux內(nèi)核床蜘,它本身就是一個操作系統(tǒng)辙培,所以我們在模擬器的瀏覽器中輸入127.0.0.1所代表的是Android模擬器(Android吸泥機)蔑水,并不是你的電腦,所以在模擬器中會出錯扬蕊。在Android操作系統(tǒng)中搀别,將本地電腦映射為10.0.2.2,所以只需要改成10.0.2.2就ok了厨相。因為我這個接口是自己寫的领曼,所以還需要在django的settings中配置一下:
ALLOWED_HOSTS = [
'10.0.2.2',
'127.0.0.1'
]
第二個坑,因為我們_get()是異步操作蛮穿,ListView里面newTitle的值始終是空
return new ListView(
children: newTitle.map((Map item){
return new News(item['title'],item['imglinks']);//item==>null
}).toList(),
);
解決這個問題的過程很曲折庶骄,花了兩天時間,解決辦法很簡單践磅,就是把_get()放到build外面去单刁,還有個辦法就是,獲取future類型函數(shù)的返回值府适,傳送門flutter實戰(zhàn)3:制作新聞分類列表羔飞。
最后貼上全部代碼:
import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
class TabPage3 extends StatefulWidget {
@override
createState() => new TabPage3States();
}
class TabPage3States extends State<TabPage3> {
@override
List<Map <String,String>> newTitle=[];
_get() async {
// List<Map> _newTitle=new List();
var responseBody;
var url='http://10.0.2.2:8000/yt/getapp/';
var httpClient = new HttpClient();
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == 200) {
responseBody = await response.transform(utf8.decoder).join();
responseBody=JSON.decode(responseBody);
}else{
print("error");
}
await responseBody['msg'].map((Map item){
newTitle.add(item);
}).toList();
}
Widget build(BuildContext context) {
_get();
return new ListView(
children: newTitle.map((Map item){
return new News(item['title'],item['imglinks']);
}).toList(),
);
}
}
代碼都是參考官網(wǎng)英文文檔擼的,但是本人是英語渣檐春,所以如果有不對的地方逻淌,歡迎大家指正!