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/ 欢迎访问
