Flutter输入框TextField属性介绍及相关问题

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,
  }) 

InputDecoration属性参数说明

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, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
  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,
})

设置输入框边框decoration

TextField默认的边框样式只有一个下边框，修改时使用decoration修改， 由于边框的优先级，直接设置border会发现效果不会正常显示，所以需要通过配置InputDecoration中的enabledBorder修改未选中状态的边框，配置InputDecoration中的focusedBorder修改选中状态的边框

TextField(
  decoration: InputDecoration(
    // 设置未选中状态的边框
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        width: 1,
        color: Colors.red,
      ),
      borderRadius: BorderRadius.all(Radius.circular(8)),
    ),
    // 设置选中状态的边框
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        width: 1,
        color: Colors.blue,
      ),
      borderRadius: BorderRadius.all(Radius.circular(8)),
    ),
  ),
),

隐藏输入框文本（密码输入框）obscureText

TextField(
  obscureText: true,
)

设置数字输入框（只允许输入数字）keyboardType

通过keyboardType属性修改，接受值为：

• TextInputType.text
• TextInputType.number
• TextInputType.multiline
• TextInputType.phone
• TextInputType.datetime
• TextInputType.emailAddress
• TextInputType.url
• TextInputType.visiblePassword
• TextInputType.name
• TextInputType.streetAddress

TextField(
  keyboardType: TextInputType.number,
)

设置键盘右下角按钮风格（textInputAction）

通过keyboardType属性修改，接受值为：

• TextInputAction.none
• TextInputAction.unspecified 操作系统自己选择最优
• TextInputAction.done 完成
• TextInputAction.go 前往
• TextInputAction.search 搜索
• TextInputAction.send 发送
• TextInputAction.next 下一项
• TextInputAction.previous 上一个(ios不支持)
• TextInputAction.continueAction 继续(仅ios支持)
• TextInputAction.join 加入(仅ios支持)
• TextInputAction.route 路线(仅ios支持)
• TextInputAction.emergencyCall 紧急呼叫(仅ios支持)
• TextInputAction.newline 安卓(换行回车)ios(返回)

TextField(
  textInputAction: TextInputAction.next
)

输入框获取锚点后，取消锚点，并隐藏软键盘

// 初始化
FocusNode userFocusNode = FocusNode();

// 配置给TextField
TextField(
  focusNode: userFocusNode,
)

// 取消锚点（在需要取消的时候调用）
userFocusNode.unfocus();

多个输入框时，使用GestureDetector控制点击空白区域取消锚点

class _HomeWidget extends State<HomeWidget> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: () {
        // 点击空白区域让搜索框取消锚点
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus &&
            currentFocus.focusedChild != null) {
          FocusManager.instance.primaryFocus?.unfocus();
        }
      },
      child: Scaffold(
        body: TextField(),
      ),
    );
  }
}

修改输入框高度

在外层套一个Container或者SizeBox

Container(
  height: 32,
  child: const TextField(),
)

在显示前置图标prefixIcon时， 解决文字和图标不横排问题

修改contentPadding修改

TextField(
  // ...
  decoration: InputDecoration(
    contentPadding: EdgeInsets.zero,
  ),
  // ...
)

解决使用prefixIcon图标和文字间距问题

TextField(
  // ...
  decoration: InputDecoration(
  	// minWidth 图标的最小宽度，通过设置最小宽，实现自定义间距
  	// minHeight 图标的最小高度
	prefixIconConstraints: BoxConstraints(minWidth: 32, minHeight: 32),
  ),
  // ...
)

---

个人博客：https://www.linmeimei.top/ 欢迎访问

---