Input 用于输入,获取用户填写的信息。
- controller 常用于赋值取值操作。
new TextField(
controller: _inputController
);
// 定义 controller
TextEditingController _inputController = TextEditingController();
// 给 input 赋值
_inputController.text = "我的名字";
// 取值
Text(_inputController.text);
- focusNode 用于管理焦点。
- keyboardType 键盘输入的类型。取值是 TextInputType 的枚举。
设置输入的数据类型,例:设置 number 默认弹出数字优先的键盘。
static const List<TextInputType> values = <TextInputType>[
text, multiline, number, phone, datetime, emailAddress, url,
];
- TextInputType.text(普通完整键盘)
- TextInputType.number(数字键盘)
- TextInputType.emailAddress(带有“@”的普通键盘)
- TextInputType.datetime(带有“/”和“:”的数字键盘)
- TextInputType.multiline(带有选项以启用有符号和十进制模式的数字键盘)
textInputAction 更改 TextField 的 textInputAction 可以更改键盘本身的操作按钮。 取值为: TextInputAction 的枚举值。
textCapitalization 提供用户输入的类型, 默认为 TextCapitalization.none。 取值为: TextCapitalization 的枚举值。
- TextCapitalization.none 无
- TextCapitalization.sentences 首句大写
- TextCapitalization.characters 所有字符大写
- TextCapitalization.word 每个单词首字母大写
style 设置文字样式。类型是 TextStyle。
textAlign 对齐方式。默认是 TextAlign.start。取值为: TextAlign 的枚举值。
textDirection 文本方向。input 光标是往右的,不知道设置这个的目的是什么?
autofocus 是否自动聚焦,默认是 false。
obscureText 是否隐藏输入,默认是 false。设置密码时可以使用。
maxLines 最大行数,默认是 1,设置 大于1 就是 textarea 了吧。
-
maxLength 最大展示数
maxLengthEnforced 是否强制执行 maxLength 如果是 false 只是在超出字数时提示,如果是 true ,则不让超出最大字数输入
onChanged 改变时候触发,参数是输入的内容。
onEditingComplete 点击键盘完成按钮(动作按钮)时触发的回调,该回调没有参数。
onSubmitted 点击键盘完成按钮(动作按钮)时触发的回调,参数是输入的内容。
onTap 点击 input 的时候触发。
-
enabled 是否禁用。如果是 false 不聚焦
cursorWidth 光标显示宽度
cursorRadius 光标显示圆角
-
cursorColor 光标显示颜色。设置
cursorColor: Colors.red, cursorWidth: 16.0, cursorRadius: Radius.circular(16.0)
效果 (为啥不是个圆????)
inputFormatters 对输入文本进行校验
官方提供了三种校验方法,分别是
WhitelistingTextInputFormatter(RegExp("[a-z]")) 白名单校验,也就是只允许输入符合规则的字符
BlacklistingTextInputFormatter(RegExp("[a-z]")) 黑名单校验,除了规定的字符其他的都可以输入
LengthLimitingTextInputFormatter(number) 长度限制,跟 maxLength 作用类似autocorrect 是否自动校验,默认是 true。
scrollPadding 默认 EdgeInsets.all(20.0)
keyboardAppearance
dragStartBehavior 默认是 DragStartBehavior.down。
enableInteractiveSelection
buildCounter
decoration 设置装饰,接收类型是 InputDecoration。详情见下。
期望效果:
默认的 TextField
使用 InputDecoration 美化一下输入框。
1. 加边框
decoration: InputDecoration(
border: OutlineInputBorder(),
),
-
设置 placeholder
decoration: InputDecoration( border: OutlineInputBorder(), hintText: '请输入姓名', ),
-
添加左右图标
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入姓名',
prefixIcon: Icon(Icons.person),
suffixIcon: Icon(Icons.remove_red_eye),
icon: Icon(Icons.person), // 在输入框外面添加一个 icon
),
其他属性
labelText 用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方
labelStyle 用于设置描述输入框的样式。
hasFloatingPlaceholder labelText 是否浮动显示。
helpText 辅助文本,位于输入框下方,如果 errorText 不空的话,则 helperText 显示
helperStyle 控制提示文字的样式。
errorText 错误提示信息。如果该属性为 null 的话,labelText 失效。
-
prefixIcon 和 prefixText
-
suffixIcon 和 suffixText
counterText 位于右下方显示的文本,常用于显示输入的字符数量。
counterStyle 用于设置 counterText 的样式。
filled 是否填充
fillColor filled 为 true 的时候生效。
-
border、errorBorder、focusedBorder、focusedErrorBorder、disabledBorder、enabledBorder 各个状态下的 border 显示。
border: OutlineInputBorder( borderRadius: BorderRadius.all( Radius.circular(28), //边角为30 ), borderSide: BorderSide( color: Colors.amber, //边线颜色为黄色 width: 2, //边线宽度为2 ), ),
默认是 UnderlineInputBorder