Flutter中TextField使用

TextField 属性使用（熟悉使用属性，有助于快速构建控件）

decoration 这个属性下

new TextField(
            decoration: new InputDecoration(
                hintText: "请输入",
                //labelText: "姓名",
                //helperText: "姓名输入",
                border: const UnderlineInputBorder(
                  borderSide: BorderSide(style: BorderStyle.solid),
                ),
              prefixIcon: new Image.asset("images/homes.png"),
              prefixText: "prefixText",
              prefixStyle: TextStyle(fontSize: 20.0,color: Colors.red),
              counterText: "counterText",
              counterStyle: TextStyle(fontSize: 20.0,color: Colors.blue),
              filled: true,
              fillColor: Colors.amberAccent,
              semanticCounterText: "semanticCounterText"
            ),
            controller: _textEditingController,
            textAlign: TextAlign.center,
            textDirection: TextDirection.ltr,
            textCapitalization: TextCapitalization.sentences,

          ),
复制代码

在没有获取焦点时，如上图

hintText：文本输入提示，不能看见。labelText: 能看见。helperText：在下方提示

hintText：文本输入提示，能看见。labelText: 想说移动，能看见。helperText：在下方提示

border： 属性 有两个 OutlineInputBorder 和 UnderlineInputBorder 一个是有边框一个是无边框。

Iocn：设置图片，返回的控件是 Widget 因此能够用任何控件做为它的 子控件，这里我使用Image,如图

而后设置文本居中显示，如图：

(textAlign: TextAlign.center,)对于这个居中显示 对Icon 没有任何反应，因此这个 icon 属性设置的任何控件都是在最左边。

prefix：返回的的是 Widget ,加载任何控件均可以，仍是使用 Image 返回，样式如图：

prefixIcon：返回的的是 Widget ,加载任何控件均可以，仍是使用 Image 返回，样式如图：

prefixIcon与 prefix 对比：

prefix获取焦点是才显示而且文本输入不在一个基线上，prefixIcon是相反

prefixText：String 类型 ，是prefix 的提示,并且只有获取焦点是才显示 ，显示样式如图：

prefixStyle：是对prefixText的字体样式设置

suffixIcon,suffix,suffixText,suffixStyle:与prefix等属性相反。

counterText和counterStyle：设置输入框右下角的文本设置，如图：

filled与fillColor：filled 是 bool 类型，是否填充满整个控件。fillColor是填充颜色：样式如图：

this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border,
//以上都是边框设置 
//有两个 OutlineInputBorder 和 UnderlineInputBorder
复制代码

TextCapitalization 属性

words, 文本内容
  sentences, 句子使用
  characters, 大写
  none, 默认
复制代码

TextEditingController

使用方式：

TextEditingController _textEditingController = new TextEditingController();
而后：controller: _textEditingController,
_textEditingController.text //获取输入内容
_textEditingController.text = "1213231"; //设置内容
_textEditingController.clear() //清空输入内容
复制代码

textInputAction 文本须要作的什么动做，TextInputAction 是一个枚举类型。修改对应的值键盘右下角的图片按钮会作相应的改变

none 默认 回车（换行，结合maxLines: 2,使用）
unspecified 回车（换行，结合maxLines: 2,使用）
newline 同上
done 一个 v 的符号
go 一个箭头
search 搜索
send 发送（一个短信图标）
next 至关于键盘上的tab 切换下个输入框
previous 与 next 相反
iOS：下面这些值 源码说的 （Android does not have an IME input type of "emergencyCall."）
continueAction 
join
route
emergencyCall
复制代码

onChanged 监听文本变化

autofocus 加入显示出来后是否获取焦点 （默认为false）

obscureText 隐藏文本输入内容 用 圆点 符号代替，而且文本不能输入汉字

maxLength: 6,和 maxLengthEnforced: true, 若是设置了 maxLength ，可是maxLengthEnforced = false 设置的长度就无效 ，只有等于 true 的时候长度设置才生效

onEditingComplete 和 onSubmitted 当配置属性 textInputAction 是 就有变化 好比down之类才有效 （none 是无效的）

onEditingComplete: (){
    print("onEditingComplete");
},
onSubmitted: (String b){
    print("onSubmitted $b");
},
复制代码

游标设置 cursorWidth cursorRadius cursorColor 就是三个属性 宽度 圆角 颜色

enabled 设置true(默认) 可编辑，而且显示下横线 。false 相反

后续.......