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

博客地址：

https://jspang.com/detailed?id=53#toc224

编写页面代码

创建动态组件HomePage，原来的代码是静态的我们这里就去掉就可以了。

原来的代码继承的是StatelessWidget，这里改成StatefulWidget

然后使用column布局来写我们的代码

Column就是我们的列布局

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

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

 

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

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

加上属性之后：

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

我们启动看一下效果：

 

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 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: () {
                
              },
              child: Text('选择完毕'),
            ),
            Text(
              showText,
              overflow: TextOverflow.ellipsis,//超出长度显示省略号
              maxLines: 1,//最多显示一行文本
            )
          ],
        )
      ),
    );
  }
}

当前代码