06-Flutter移動電商實戰-dio基礎_Get_Post請求和動態組件協作

上篇文章中，我們只看到了 dio 的使用方式，但并未跟應用關聯起來，所以這一篇將 dio 網絡請求與應用界面結合起來，當然這也是為以后的實戰作基礎準備，基礎打牢，我們才能飛速前進。

1、案例說明

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

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

然后點擊按鈕，相當于去后端請求數據

后端返回數據后，根據你的需要美女就會走進房間

一圖頂千言

2、生成動態組件

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

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

3、加入文本框Widget

有了動態組件，咱們先把界面布局作一下。

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方法

布局完成后，可以先編寫一下遠程接口的調用方法，跟上節課的內容類似，不過這里返回值為一個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 回調。

5、得到數據后的處理

當我們寫完內容后，要點擊按鈕，按鈕會調用方法，并進行一定的判斷。比如判斷文本框是不是為空。然后當后端返回數據時，我們用setState方法更新了數據。

具體代碼如下：

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、總結

通過這節課的學習，我們應該掌握如下知識點

對Flutter動態組件的深入了解

Future對象的使用

改變狀態和界面的setState的方法應用

TextField Widget的基本使用

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。