Flutter TextField 组件的属性、监听、赋值等详细说明-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter TextField 组件的属性、监听、赋值等详细说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.TextField 属性：

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.TextField 的 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.TextField 的 controller 使用：

//初始化控制器
TextEditingController _use = TextEditingController();

①获取文本框内容:

_use.text.toString();

②给文本框赋值，有两种写法：

String mUserId="123";

// 给文本框赋值 1
_use.value = _use.value.copyWith(
  text: mUserId.isEmpty ? "" : mUserId,
  selection: TextSelection(
      baseOffset: mUserId.length, extentOffset: mUserId.length),
  composing: TextRange.empty,
);
// 给文本框赋值 2 
_use = TextEditingController.fromValue(TextEditingValue(
    text: mUserId.isEmpty ? "" : mUserId, //判断keyword是否为空
    // 保持光标在最后

    selection: TextSelection.fromPosition(TextPosition(
        affinity: TextAffinity.downstream, offset: mUserId.length))));

③文本框的监听：

_use .addListener(() {

print("你输入的内容为："+mUserId);

});

4.TextField 的改变事件 onChanged ：

return TextField(
//改变事件

onChanged: (str) {

print("你改变的内容为："+str);

},);

5.TextField 的焦点 focusNode 使用：

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

//使用

return TextField(

focusNode: _focusNode,

）；

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

6.TextField 使用实例（用到了部分属性）：

//输入框
Widget _input() {
  return TextField(
    controller: _use,//控制器名称
    textAlignVertical: TextAlignVertical.center,
    maxLines: 1,
    style: TextStyle(fontSize: 40.sp),
    focusNode: _usefocusNode,//焦点名称
    //改变事件
    onChanged: (str) {
      setState(() {});
    },
    decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.r),
        isCollapsed: true,
        //文本框前面的图片
        prefixIcon: const Icon(Icons.person),
        //文本框后面的图片(根据是否获取焦点并且有文本框内容来判断是否显示图片)
        suffixIcon: _usefocusNode.hasFocus && _use.text.isNotEmpty
            ? IconButton(
                //如果文本长度不为空则显示清除按钮
                onPressed: () {
                  _use.clear();
                  setState(() {});
                },
                icon: const Icon(Icons.cancel, color: Colors.grey))
            : null,
        hintText: "请输入账号",
        //文本框选中外边框属性
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.r)),//文本框边框圆角
            borderSide: BorderSide(width: 2.w, color: Colors.black12)),//文本框边框宽度和颜色
         //文本框未选中外边框属性
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.r)),
            borderSide: BorderSide(width: 2.w, color: Colors.blueAccent))),
  );
}