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