Flutter TextField属性详解

TextField和TextFormField的属性

输入框是比较复杂的组件，文本输入是最常见的一种交互方式，应用的情况也比较多。在上一个项目中，关于输入框的组件处理了很多，所以觉得很有必要单独拎出来了解下。

以下是输入框的属性和方法：

属性名	类型	说明
decoration	InputDecoration	输入框的装饰器，设置内容或者装饰
controller	TextEditingController	控制器，跟输入框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
focusNode	FocusNode	焦点控制
keyboardType	TextInputType	设置输入类型(键盘类型)
inputFormatters	List	限制输入文本的格式
obscureText	bool	是否隐藏输入的文字
textInputAction	TextInputAction	键盘事件类型
textCapitalization	TextCapitalization	设置文本大写
style	TextStyle	输入文本的样式
textAlign	TextAlign	文本的对齐方式
textDirection	TextDirection	文字的排列方向
autofocus	bool	是否自动获取焦点
autocorrect	bool	是否自动校验
maxLines	int	最大行数
maxLength	int	输入的最大字符个数
maxLengthEnforced	bool	配合maxLength一起使用，在达到最大长度时是否阻止输入
onEditingComplete	VoidCallback	点击键盘完成按钮时触发的回调，该回调没有参数，(){}
onSubmitted	VoidCallback	点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(v){}
enabled	bool	输入框是否可用
cursorWidth	double	光标的宽度
cursorRadius	Radius	光标的圆角
cursorColor	Color	光标的颜色

TextField(普通输入框)

普通输入框指的是单独的输入框，没有在表单中的输入框。它和表单中的输入框TextFormField方法略有不同，TextFormField是在TextField的基础上扩展的。

属性名	类型	说明
onChanged	VoidCallback	用户输入时的回调(v){}
onTap	VoidCallback	点击输入框时的回调

TextFormField(表单里的输入框)

表单中的输入框最主要的特点就是提供了表单验证。

属性名	类型	说明
validator	FormFieldValidator<T>	表单验证器
autovalidate	bool	自动验证值
onSaved	FormFieldSetter<T>	表单保存的回调方法
initalValue	T	表单字段初始值

InputDecoration

TextField装饰器，可以理解成输入框的默认属性和一些样式定义，以下是它的构造方法：

InputDecoration({
    this.icon,    //位于装饰器外部和输入框前面的图片
    this.labelText,  //用于描述输入框，当输入框获取焦点时默认会浮动到上方，
    this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
    this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
    this.helperStyle, //helperText的样式
    this.hintText,  //提示文本，位于输入框内部
    this.hintStyle, //hintText的样式
    this.hintMaxLines, //提示信息最大行数
    this.errorText,  //错误信息提示
    this.errorStyle, //errorText的样式
    this.errorMaxLines,   //errorText最大行数
    this.hasFloatingPlaceholder = true,  //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
    this.isDense,   //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
    this.contentPadding, //内间距
    this.prefixIcon,  //位于输入框内部起始位置的图标。
    this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
    this.prefixText,  //预填充的文本，例如手机号前面预先加上区号等
    this.prefixStyle,  //prefixText的样式
    this.suffixIcon, //位于输入框后面的icon
    this.suffix,  //位于输入框尾部的控件，同样的不能和suffixText同时使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的样式
    this.counter,//位于输入框右下方的小控件，不能和counterText同时使用
    this.counterText,//位于右下方显示的文本，常用于显示输入的字符数量
    this.counterStyle, //counterText的样式
    this.filled,  //如果为true，则输入使用fillColor指定的颜色填充
    this.fillColor,  //相当于输入框的背景颜色
    this.errorBorder,   //errorText不为空，输入框没有焦点时要显示的边框
    this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话，该属性无效
    this.focusedErrorBorder,  //errorText不为空时，输入框有焦点时的边框
    this.disabledBorder,  //输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
    this.enabledBorder,  //输入框可用时显示的边框，如果errorText不为空的话，该属性无效
    this.border, //正常情况下的border
    this.enabled = true,  //输入框是否可用
    this.semanticCounterText,
    this.alignLabelWithHint,
  })

inputFormatters

用于限制输入的内容。

• WhitelistingTextInputFormatter 白名单校验，也就是只允许输入符合规则的字符
• BlacklistingTextInputFormatter 黑名单校验，除了规定的字符其他的都可以输入
• LengthLimitingTextInputFormatter 长度限制，跟maxLength作用类似

例如：只允许输入数字，并且不超过6个字符

inputFormatters: [
      WhitelistingTextInputFormatter.digitsOnly,
      LengthLimitingTextInputFormatter(6)
]

实例

文本监听

新建一个简单的输入框，并实现文本监听，栗子1：

String _inputText = '';
//控制器
TextEditingController _controller = new TextEditingController.fromValue(
  TextEditingValue(
    text: _inputText,
    selection: new TextSelection.fromPosition(
      TextPosition(
          affinity: TextAffinity.downstream, offset:_inputText.length),
    ),
  ),
);
//输入框
TextField(
  controller:_controller,
  decoration: InputDecoration(
    icon: Icon(Icons.person),
    labelText:'用户名'
  ),
  onChanged: (v){
    setState(() {
      _inputText = v;
    });
  }
)

当使用TextFormField时没有onChanged，只能手动实现监听，栗子2：

String _inputText = '';
//控制器
TextEditingController _controller = new TextEditingController.fromValue(
  TextEditingValue(
    text: _inputText,
    selection: new TextSelection.fromPosition(
      TextPosition(
          affinity: TextAffinity.downstream, offset:_inputText.length),
    ),
  ),
);
//监听值的变化
void onChange() {
  String v = _textController.text;
  setState(() {
    _inputText = v;
  });
}
_controller.addListener(onChange);
//输入框
TextFormField(
  controller:_controller,
  decoration: InputDecoration(
    icon: Icon(Icons.person),
    labelText:'用户名'
  ),
)

实现文本清除按钮

在输入框有内容时显示清除按钮，在输入框内容为空时隐藏清除按钮，栗子3：

TextEditingController _controller = new TextEditingController();
//带清除的输入框
TextField(
  controller:_controller,
  decoration: InputDecoration(
    icon: Icon(Icons.person),
    suffixIcon:_controller.text.length > 0
              ? IconButton(
                  icon: Icon(
                    Icons.cancel,
                    size:20.0,
                    color: Colors.grey,
                  ),
                  onPressed: () {
                    WidgetsBinding.instance.addPostFrameCallback((_) => _controller.clear());
                  },
                ) : Text(""),
  ),
)

参考

Flutter文本输入框TextField属性