Flutter TextField组件

简单的说，这个组件其实就是个输入框。

1. 属性

const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦点
this.decoration = const InputDecoration(),//装饰
TextInputType keyboardType,//键盘类型，即输入类型
this.textInputAction,//键盘按钮
this.textCapitalization = TextCapitalization.none,//大小写
this.style,//样式
this.strutStyle,
this.textAlign = TextAlign.start,//对齐方式
this.textDirection,
this.autofocus = false,//自动聚焦
this.obscureText = false,//是否隐藏文本，即显示密码类型
this.autocorrect = true,//自动更正
this.maxLines = 1,//最多行数，高度与行数同步
this.minLines,//最小行数
this.expands = false,
this.maxLength,//最多输入数，有值后右下角就会有一个计数器
this.maxLengthEnforced = true,
this.onChanged,//输入改变回调
this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
this.onSubmitted,//提交时,配合TextInputAction
this.inputFormatters,//输入校验
this.enabled,//是否可用
this.cursorWidth = 2.0,//光标宽度
this.cursorRadius,//光标圆角
this.cursorColor,//光标颜色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//点击事件
this.buildCounter,
this.scrollPhysics,
})

2. InputDecoration() 属性：

const InputDecoration({
this.icon, // 装饰器外小图标
this.labelText, // 文本框描述标签
this.labelStyle, // 文本框描述标签样式
this.helperText, // 文本框辅助标签
this.helperStyle, // 文本框辅助标签样式
this.hintText, // 文本框默认提示信息
this.hintStyle, // 文本框默认提示信息样式
this.hintMaxLines, // 文本框默认提示信息最大行数
this.errorText, // 文本框错误提示信息
this.errorStyle, // 文本框错误提示信息样式
this.errorMaxLines, // 文本框错误提示信息最大行数
this.hasFloatingPlaceholder = true, // 文本框获取焦点后 labelText 是否向上浮动
this.isDense, // 是否问紧凑型文本框
this.contentPadding, // 文本内边距
this.prefixIcon, // 前置图标
this.prefix, // 前置预填充 Widget
this.prefixText, // 前置预填充文本
this.prefixStyle, // 前置预填充样式
this.suffixIcon, // 后置图标
this.suffix, // 后置预填充 Widget
this.suffixText, // 后置预填充文本
this.suffixStyle, // 后置预填充样式
this.counter, // 输入框右下角 Widget
this.counterText, // 输入框右下角文本
this.counterStyle, // 输入框右下角样式
this.filled, // 是否颜色填充文本框
this.fillColor, // 填充颜色
this.errorBorder, // errorText 存在时未获取焦点边框
this.focusedBorder, // 获取焦点时边框
this.focusedErrorBorder, // errorText 存在时获取焦点边框
this.disabledBorder, // 不可用时边框
this.enabledBorder, // 可用时边框
this.border, // 边框
this.enabled = true, // 输入框是否可用
this.semanticCounterText,
this.alignLabelWithHint, // 覆盖将标签与 TextField 的中心对齐
})

3. controller 使用：

3.1 获取和赋值

TextEditingController _textController = TextEditingController();
String text = _textController.text.toString(); //获取
_textController.text = text; //赋值

3.2 监听

_textController.addListener((){
  print('有变化');
});

//如果要知道有变化，还可以直接用事件
TextField(
  onChanged: (str){
    print('内容=$str');
  },
)

4. 焦点focusNode的使用

这个我实际上目前没用到，记录一下,参考的别人的文档，这部分我没试过

//创建FocusNode对象实例
FocusNode _focusNode = FocusNode();
//使用

return TextField(

focusNode: _focusNode,

）；

/// 输入框焦点事件的捕捉与监听
@override
void initState() {
  super.initState()
  //添加listener监听
  //对应的TextField失去或者获取焦点都会回调此监听
  _focusNode.addListener(() {
    
    if (_focusNode.hasFocus) {
      //获取焦点
      print("获取焦点");
    } else {
      //失去焦点
      print("失去焦点");
    }
  });
 
}

5. 输入限制

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp("[0-9]")),
    LengthLimitingTextInputFormatter(4),
  ],
),

5.1 限制输入内容

这里用到了正则表达式，自己可以研究，下面列出常用的

• 上面这句FilteringTextInputFormatter.allow(RegExp("[0-9]")),是限制允许输入数字
• FilteringTextInputFormatter.allow(RegExp("[0-9.]")), 是允许输入数字和小数点
• FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")), 是允许输入大小写字母

这里要注意的是除了用allow来限制，还可以用deny来限制不允许输入的

5.2 限制输入长度

LengthLimitingTextInputFormatter(4),

6. 使用

记录下我使用的。

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp("[0-9]")),
    LengthLimitingTextInputFormatter(4),
  ],
  textCapitalization: TextCapitalization.none,
  decoration: const InputDecoration(
    hintText: "Filter Time",
    hintStyle: TextStyle(color: Colors.black12),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
      borderSide: BorderSide(
        color: Colors.blue,
        width: 1,
      ),
    ),
  ),
  controller: _phFilterTimeController,
),

当前版本是这么用，之前找到早几年有别的写法，试了下已经不能用了

————————————————

参考内容：

原文链接：https://blog.csdn.net/shiyangkai/article/details/124733440