06-Flutter移動電商實戰(zhàn)-dio基礎(chǔ)_Get_Post請求和動態(tài)組件協(xié)作

上篇文章中，我們只看到了 dio 的使用方式，但并未跟應(yīng)用關(guān)聯(lián)起來，所以這一篇將 dio 網(wǎng)絡(luò)請求與應(yīng)用界面結(jié)合起來，當(dāng)然這也是為以后的實戰(zhàn)作基礎(chǔ)準(zhǔn)備，基礎(chǔ)打牢，我們才能飛速前進(jìn)。

1、案例說明

我們還是作去“大保健”選擇服務(wù)對象這個例子，不過這次我們使用按鈕和動態(tài)組件來實現(xiàn)。具體業(yè)務(wù)邏輯是這樣的：

我們制作一個文本框，用于輸入需要什么樣的美女為我們服務(wù)

然后點擊按鈕，相當(dāng)于去后端請求數(shù)據(jù)

后端返回數(shù)據(jù)后，根據(jù)你的需要美女就會走進(jìn)房間

一圖頂千言

2、生成動態(tài)組件

可以使用stful的快捷方式，在AndroidStudio里快速生成StatefulWidget的基本結(jié)構(gòu)，我們只需要改一下類的名字就可以了，就會得到如下代碼.

class?HomePage?extends?StatefulWidget?{_HomePageState?createState()?=>?_HomePageState(); }class?_HomePageState?extends?State<HomePage>?{@overrideWidget?build(BuildContext?context)?{return?Container(child:?child,);} }

3、加入文本框Widget

有了動態(tài)組件，咱們先把界面布局作一下。

Widget?build(BuildContext?context)?{return?Container(child:?Scaffold(appBar:?AppBar(title:?Text('美好人間'),),body:Container(height:?1000,child:?Column(children:?<Widget>[TextField(controller:typeController,decoration:InputDecoration?(contentPadding:?EdgeInsets.all(10.0),labelText:?'美女類型',helperText:?'請輸入你喜歡的類型'),autofocus:?false,),RaisedButton(onPressed:_choiceAction,child:?Text('選擇完畢'),),Text(showText,overflow:TextOverflow.ellipsis,maxLines:?2,),],),)?),);}

4、Dio的get_post方法

布局完成后，可以先編寫一下遠(yuǎn)程接口的調(diào)用方法，跟上節(jié)課的內(nèi)容類似，不過這里返回值為一個Future，這個對象支持一個等待回掉方法then。具體代碼如下:

Future?getHttp(String?TypeText)async{try{Response?response;var?data={'name':TypeText};response?=?await?Dio().get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",queryParameters:data);return?response.data;}catch(e){return?print(e);}}

post方法如上方幾乎一致，只是改變了請求方式：

?Future?getHttp(String?TypeText)?async{try{Response?response;var?data={'name':TypeText};response?=?await?Dio().post("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/post_dabaojian",queryParameters:data);return?response.data;}catch(e){return?print(e);}}

為何要返回 Feature，只有返回 Feature 才能使用 then 回調(diào)。

5、得到數(shù)據(jù)后的處理

當(dāng)我們寫完內(nèi)容后，要點擊按鈕，按鈕會調(diào)用方法，并進(jìn)行一定的判斷。比如判斷文本框是不是為空。然后當(dāng)后端返回數(shù)據(jù)時，我們用setState方法更新了數(shù)據(jù)。

具體代碼如下：

void?_choiceAction(){print('開始選擇你喜歡的類型............');if(typeController.text.toString()==''){showDialog(context:?context,builder:?(context)=>AlertDialog(title:Text('美女類型不能為空')));}else{getHttp(typeController.text.toString()).then((val){setState(()?{showText=val['data']['name'].toString();});});}}

6、案例全部代碼

import?'package:flutter/material.dart'; import?'package:dio/dio.dart';class?HomePage?extends?StatefulWidget?{_HomePageState?createState()?=>?_HomePageState(); }class?_HomePageState?extends?State<HomePage>?{TextEditingController?typeController?=?TextEditingController();String?showText?=?'歡迎你來到美好人間';@overrideWidget?build(BuildContext?context)?{return?Container(child:?Scaffold(appBar:?AppBar(title:?Text('美好人間'),),body:Container(height:?1000,child:?Column(children:?<Widget>[TextField(controller:typeController,decoration:InputDecoration?(contentPadding:?EdgeInsets.all(10.0),labelText:?'美女類型',helperText:?'請輸入你喜歡的類型'),autofocus:?false,),RaisedButton(onPressed:_choiceAction,child:?Text('選擇完畢'),),Text(showText,overflow:TextOverflow.ellipsis,maxLines:?2,),],),)?),);}void?_choiceAction(){print('開始選擇你喜歡的類型............');if(typeController.text.toString()==''){showDialog(context:?context,builder:?(context)=>AlertDialog(title:Text('美女類型不能為空')));}else{getHttp(typeController.text.toString()).then((val){setState(()?{showText=val['data']['name'].toString();});});}}Future?getHttp(String?TypeText)async{try{Response?response;var?data={'name':TypeText};response?=?await?Dio().get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",queryParameters:data);return?response.data;}catch(e){return?print(e);}} }

7、總結(jié)

通過這節(jié)課的學(xué)習(xí)，我們應(yīng)該掌握如下知識點

對Flutter動態(tài)組件的深入了解

Future對象的使用

改變狀態(tài)和界面的setState的方法應(yīng)用

TextField Widget的基本使用

posted @ 2019-06-15 21:19 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。