Flutter TextField 使用详解

站长

2024年03月19日 13:54 · 阅读数 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,
  })

第二层对应第一层中的decoration属性，通常使用InputDecoration类。如果想使用TextFiled做到比较理想的效果，就必须这些：

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.prefixIconConstraints,//头部icon约束
  this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
  this.suffix,  //位于输入框尾部的控件，同样的不能和suffixText同时使用
  this.suffixText,//位于尾部的填充文字
  this.suffixStyle,  //suffixText的样式
  this.suffixIconConstraints,//尾部icon 约束
  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,
})

基本使用

创建一个TextField

TextField(),

会发现自带下划线，处理方式：

TextField(
  decoration: InputDecoration(
    border: InputBorder.none
  ),
),

添加背景色

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    fillColor: Colors.green,
    filled: true,
  ),
),

添加边框、边框颜色、圆角

OutlineInputBorder getBorder(){
  OutlineInputBorder outlineInputBorder = const OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),//圆角
      borderSide: BorderSide(
          width: 1,//线宽
          color: Colors.green//边框颜色
      )
  );
  return outlineInputBorder;
}
TextField(
  decoration: InputDecoration(
    border: getBorder(),//正常情况border
    focusedBorder: getBorder(),//聚焦情况
    enabledBorder: getBorder(),//可输入情况
    errorBorder: getBorder(),//errorText不为空，输入框没有焦点时要显示的边框
    disabledBorder: getBorder(),//输入禁用
  ),
),

多行输入文本居中显示

TextField(
  minLines: 1,//必须填1，才可居中，其他默认是左上对齐
  maxLines: 10,//最多行数，大于1即可
  decoration: InputDecoration(
    border: getBorder(),//同时这些border也必须设置，不然文本也不会居中
    focusedBorder: getBorder(),
    enabledBorder: getBorder(),
    errorBorder: getBorder(),
    disabledBorder: getBorder(),
    fillColor: Colors.green,
    filled: true,
    contentPadding: const EdgeInsets.all(5),//此属性也必须设置，否则会出现很多奇怪的问题，比如多行输入不换行、多行输入不显示等问题

  ),
)

大致就这些了。