美文网首页
flutter控件之TextField

flutter控件之TextField

作者: Mr丶xi先森 | 来源:发表于2018-09-11 16:18 被阅读2385次
import 'package:flutter/material.dart';
class LearnTextField extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LearnTextField();
  }
}
class _LearnTextField extends State<StatefulWidget>{
  TextEditingController textEditingController=new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Container(
            child:new Text('学习TextField',
              style: new TextStyle(
                decoration: TextDecoration.none,
                fontSize: 30.0,
                color: Colors.black,
              ),
            ),
            margin: EdgeInsets.fromLTRB(0.0, 30.0, 0.0, 30.0),
          ),
          new Container(
            margin: EdgeInsets.fromLTRB(0.0, 30.0, 0.0, 20.0),
            child:new Material(
              shape: new OutlineInputBorder(
                  borderRadius:new BorderRadius.all(new Radius.circular(20.0)),
                  borderSide: new BorderSide(
                    style:BorderStyle.solid ,
                    color: Colors.blue,
                    width: 5.0,
                  )
              ),
              child: new TextField(
              ),
            ),
          ),
          new Material(
            shape: new StadiumBorder(
              side: new BorderSide(
                color: Colors.blue,
                width: 5.0,
              ),
            ),
            child:
            new TextField(//文本输入控件
              onChanged: (String str){//输入监听
                print('用户输入变更');
              },
              onSubmitted:(String str){//提交监听
                print('用户提交变更');
              },
              keyboardType: TextInputType.number,//设置输入框文本类型
              controller: textEditingController,//控制器,控制文字内容
              textAlign: TextAlign.left,//设置内容显示位置是否居中等
              style: new TextStyle(
                fontSize: 20.0,
                color: Colors.blueAccent,
              ),
              autofocus: true,//自动获取焦点
              decoration: new InputDecoration(
//                labelText: '这里输入labelText',
//                helperText: '这里是helperText',
//                icon: new Container(
//                  padding: EdgeInsets.all(0.0),
//                  child: new Icon(Icons.phone),
//                ),
//                errorText: '这是错误的errorText',
                contentPadding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),//设置显示文本的一个内边距
//                border: InputBorder.none,//取消默认的下划线边框
              ),
            ),
          ),
          new Container(
            margin:EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
            padding: EdgeInsets.all(15.0),
            decoration: new BoxDecoration(
              color: Colors.blueAccent,
              borderRadius:BorderRadius.all(Radius.circular(10.0)),
            ),
            child: new Builder(
                builder: (BuildContext context){
                  return new GestureDetector(
                    child:new Text('点击获取内容',
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onTap: (){
                      Scaffold.of(context).showSnackBar(new SnackBar(content:new Text(textEditingController.text.toString())));
                    },
                  );
                },
            ),
          )
        ],
      ),
    );
  }
}

相关文章

网友评论

      本文标题:flutter控件之TextField

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