淺嘗flutter中的http請求

本篇教程聊一聊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)英文文檔擼的,但是本人是英語渣檐春,所以如果有不對的地方逻淌,歡迎大家指正!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疟暖,一起剝皮案震驚了整個濱河市卡儒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌俐巴,老刑警劉巖骨望,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異欣舵,居然都是意外死亡擎鸠,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門缘圈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來劣光,“玉大人,你說我怎么就攤上這事糟把∈晗撸” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵糊饱,是天一觀的道長。 經(jīng)常有香客問我颠黎,道長另锋,這世上最難降的妖魔是什么滞项? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮夭坪,結(jié)果婚禮上文判,老公的妹妹穿的比我還像新娘。我一直安慰自己室梅,他們只是感情好戏仓,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著亡鼠,像睡著了一般赏殃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上间涵,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天仁热,我揣著相機與錄音,去河邊找鬼勾哩。 笑死抗蠢,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的思劳。 我是一名探鬼主播迅矛,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼潜叛!你這毒婦竟也來了秽褒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤钠导,失蹤者是張志新(化名)和其女友劉穎震嫉,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牡属,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡票堵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了逮栅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悴势。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖措伐,靈堂內(nèi)的尸體忽然破棺而出特纤,到底是詐尸還是另有隱情,我是刑警寧澤侥加,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布捧存,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏昔穴。R本人自食惡果不足惜镰官,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吗货。 院中可真熱鬧泳唠,春花似錦、人聲如沸宙搬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽勇垛。三九已至脖母,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間窥摄,已是汗流浹背镶奉。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留崭放,地道東北人哨苛。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像币砂,于是被迫代替她去往敵國和親建峭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361