海口中小企业网站制作,汕头公司网站建设,外贸网站cms,装修工人06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作
上篇文章中#xff0c;我们只看到了 dio 的使用方式#xff0c;但并未跟应用关联起来#xff0c;所以这一篇将 dio 网络请求与应用界面结合起来#xff0c;当然这也是为以后的实战作基础准备#xff0c;基础打…06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作
上篇文章中我们只看到了 dio 的使用方式但并未跟应用关联起来所以这一篇将 dio 网络请求与应用界面结合起来当然这也是为以后的实战作基础准备基础打牢我们才能飞速前进。
1、案例说明
我们还是作去“大保健”选择服务对象这个例子不过这次我们使用按钮和动态组件来实现。具体业务逻辑是这样的
我们制作一个文本框用于输入需要什么样的美女为我们服务然后点击按钮相当于去后端请求数据后端返回数据后根据你的需要美女就会走进房间
一图顶千言 2、生成动态组件
可以使用stful的快捷方式在AndroidStudio里快速生成StatefulWidget的基本结构我们只需要改一下类的名字就可以了就会得到如下代码.
class HomePage extends StatefulWidget {_HomePageState createState() _HomePageState();
}class _HomePageState extends StateHomePage {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(() {showTextval[data][name].toString();});});}}6、案例全部代码
import package:flutter/material.dart;
import package:dio/dio.dart;class HomePage extends StatefulWidget {_HomePageState createState() _HomePageState();
}class _HomePageState extends StateHomePage {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(() {showTextval[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 阅读(...) 评论(...) 编辑 收藏
