Flutter Widget 之 TextField

本文主要是Flutter中TextField控件的简单使用说明

说明

---

• TextField:文本输入框；
• 支持最大长度限制，支持多行；

基本用法

---

1.默认情况下，TextField下方有一个下划线

默认TextField

2.TextField部分属性

TextField(
              //Controls the text being edited:TextEditingController
              controller: controller,
              //Defines the keyboard focus for this widget.FocusNode 控制TextField焦点
              focusNode: focusNode,
            //输入能容的样式
              style: new TextStyle(fontSize: 14.0, color: Color(0xff222222)),
            //对齐方式
              textAlign: TextAlign.left,
              //键盘类型：text, multiline, number, phone, datetime, emailAddress, url,
              keyboardType:TextInputType.number
            //密码样式显示 
              obscureText: true,
              //最大长度，这里指的是字符长度：The maximum number of characters
              //(Unicode scalar values) to allow in the text field.
              //当大于设置长度时，再输入的文本不会显示；
              maxLength: 12 ,
              //当设置maxLengthEnforced为true时，如果超出maxLength，文本框还是会显示，
              /// If true, prevents the field from allowing more than [maxLength]
              /// characters.
              ///
              /// If [maxLength] is set, [maxLengthEnforced] indicates whether or not to
              /// enforce the limit, or merely provide a character counter and warning when
              /// [maxLength] is exceeded.
              maxLengthEnforced：false
              // 自动获取焦点
              autofocus: false,
              onChanged: (String str) {
                //输入监听
                
              },
              onSubmitted: (String str) {
                //当点击键盘done or search 等提交按钮时，触发此回调
                
              },
            decoration: InputDecoration(
//                  filled: true,//是否需要填充文本框
//                  fillColor: Colors.blue.shade100, //文本框的填充色
                  border: InputBorder.none,//边框 none：没有边框、UnderlineInputBorder为底部线条、OutlineInputBorder完整的边框，可设置边框大小宽度、圆角；
//                labelText: placeholder,//文本框的placeholder，当内容为空时显示，不会消失，会缩小字体显示在上方
                  hintText: placeholder,//文本框的placeholder，当内容为空时显示，输入内容后消失
                  contentPadding: EdgeInsets.only(top:15),//设置输入内容的padding
                  hintStyle: new TextStyle(
                    fontSize: 13.0,
                    color: Color(0xff969696),
                  )),
            ),

注意：
1.设置文本框的填充色时，必须同时把decoration属性里的filled设置为true，仅设置fillColor时，填充色是不会显示的；
2.设置maxLength后会在右下角显示输入长度信息（0/12）,并且无法修改；
3.以上只是TextField部分属性，完整属性 可查询官方API;

TextField

3.onChanged是输入框内每次文本改变触发的回调，onSubmitted是用户提交而触发的回调

4.每当用户改变输入文本内容时，都会在control输出现在的字符串

5.失去焦点可以使用：

//focusNode为TextField中设置的focusNode属性对象
 focusNode.unfocus();