美文网首页
flutter TextField

flutter TextField

作者: HT_Jonson | 来源:发表于2019-12-05 14:14 被阅读0次

    先上源码

    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 来写的 大家可以自己定义

    相关文章

      网友评论

          本文标题:flutter TextField

          本文链接:https://www.haomeiwen.com/subject/iipdgctx.html