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),//此特点也有必要设置，否则会呈现许多古怪的问题，比如多行输入不换行、多行输入不显现等问题
),
)
大致就这些了。
