Flutter移动电商实战 --(6)dio基础_Get_Post请求和动态组件协作
2023-09-11 14:15:29 时间
上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进。
1、案例说明
我们还是作去“大保健”选择服务对象这个例子,不过这次我们使用按钮和动态组件来实现。具体业务逻辑是这样的:
- 我们制作一个文本框,用于输入需要什么样的美女为我们服务
- 然后点击按钮,相当于去后端请求数据
- 后端返回数据后,根据你的需要美女就会走进房间
一图顶千言
2、生成动态组件
可以使用stful的快捷方式,在AndroidStudio里快速生成StatefulWidget的基本结构,我们只需要改一下类的名字就可以了,就会得到如下代码.
class HomePage extends StatefulWidget { _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget 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 = '欢迎你来到美好人间'; @override 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, ), ], ), ) ), ); } 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的基本使用
相关文章
- Flutter 使用高德地图定位
- Flutter笔记-基础组件
- Flutter入门(一)--组件
- [Flutter] Flexible the Widget height to available space
- [Flutter] 因为不讲这个重点, 全网 flutter 实战视频沦为二流课程
- [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.
- Flutter — 实现验证码倒计时功能
- Flutter功能 组件描边,圆角
- flutter 弹窗队列封装,里面的自定义回调值得学习
- flutter多个定时器销毁不了的问题
- flutter Uint8List格式的图片和File格式图片的互相转换
- flutter 导入第三方库无效
- Flutter LimitedBox配合Text组件实现文字显示一行,超出显示点点点...
- Flutter跨组件共享状态的利器Provider原理解析
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- Flutter 官方自带日期组件 和第三方 日期组件、轮播图 flutter_swiper
- Flutter AspectRatio、Card 卡片组件、Flutter页面布局 Wrap 组件
- Flutter ListView 基础列表组件、水平 列表组件、动态列表图标组件
- Flutter Container 组件、Text 组件、图片组件详解
- Flutter 目录结构介绍、入口、自定义 Widget、Center 组件、Text 组件、 MaterialApp 组件、Scaffold 组件
- Flutter组件学习之ClipOval圆形裁剪——筑梦之路