flutter TextField

先上源码

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController typeControllerType = TextEditingController();
  String showText = '测试号看看';
  String showTextSec = '';
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
          appBar: AppBar(title: Text('商城首页'), backgroundColor: Colors.blue),
          body: Container(
            child: Column(
              children: <Widget>[
                TextField(
                  controller: typeControllerType,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10.0),
                    labelText: '选择类型',
                    helperText: '请输入类型',
                  ),
                  onChanged: (text) {
                      //内容改变的回调
                    setState(() {
                      showText = text;
                      showTextSec = text;
                    });
                    },
                  autofocus: false,
                ),
                RaisedButton(
                  onPressed: () {
                    getHttps(showText);
                  },
                  child: Text('data'),
                ),
                Text(showText),
                Text(showTextSec)
              ],
            ),
          )),
    );
  }
  Future getHttps(String type) async{
    Response response;
    try {
      response = await Dio().get('http://rap2api.taobao.org/app/mock/229850/queryList/?type=${type}');
      print(response.data['foo'].toString());
      setState(() {
        showText = response.data['foo'].toString();
      });
    } catch (e) {
      print('异常抛出${e}');
    }
  }
}
image.png

很简单的一个页面
点击data后请求网络返回 接口数据 和一个text输入框的 数据更新

数据接口采用的是 mock 阿里的rap2 来写的 大家可以自己定义

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:...
    壹尘子阅读 4,454评论 1 1
  • 在学习Flutter的过程中经常会遇到一些小坑,由于目前Flutter还不够完善,有些问题还是要我们自己想办法解决...
    yivin阅读 17,844评论 20 10
  • TextField Flutter的文本输入框 属性 maxLength : 30, 最大长度,设置此项会让Tex...
    圣天问阅读 3,329评论 0 0
  • 实现TextField说简单也简单,说有坑,坑也不小,下面从易到难介绍一下使用 1.最简单的就是无参数调用构造方法...
    Realank阅读 96,513评论 20 64
  • 有些人,注定会从你的全世界路过。 小时候父母就跟我说,“要做一个自立的人,这辈子谁都可能离开你,所以也别指望任何人...
    口述笔录阅读 255评论 0 1