Flutter实战视频-移动电商-06.Dio基础_Get请求和动态组件协做

博客地址：

https://jspang.com/post/FlutterShop.html#toc-0ee

编写页面代码

建立动态组件HomePage，原来的代码是静态的咱们这里就去掉就能够了。

而后使用column布局来写咱们的代码

Column就是咱们的列布局

TextField只有设置了controller，才能获取到文本框的值。首先咱们放的是一个TextField文本框

咱们在上面声明typeController。它的类型是：TextEditingController

 

showText咱们在最上限赋值，并给它一个默认值

咱们在导读使用Text的时候，若是外层没有加Container的，就要加一些属性对Text进行限制。

加上属性以后：

这样咱们的页面代码就洗完了 。

咱们启动看一下效果：

 

开始写http请求

须要一个内部的方法，返回一个Futer对象

声明一个变量，把咱们的typeText传进去。造成mapper类型

 

 

执行按钮点击事件，调用咱们这个获取http请求的方法，咱们新建一个内部方法，flutter里面内部方法习惯用下划线开头

经过typeController.text.toString()获取到文本框的值，而后判断一下是否为空，若是为空就弹出提示

若是不为空，就调用咱们的http请求

 

 

返回的future最大的做用就是咱们能够使用then。then是一个回调函数，val值就是最终返回的json数据

而后在里面咱们调用SetState方法改变showText的值

最终效果展现：

 

 

最终代码：

 

 

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class HomePage extends StatefulWidget {
  @override
  _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(
          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: 1,//最多显示一行文本
              )
            ],
          ),
        ),
      )
    );
  }
 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);
   }
 }

}

home_page.dart