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 最大展示数
image
-
maxLengthEnforced 是否强制执行 maxLength 如果是 false 只是在超出字数时提示，如果是 true ，则不让超出最大字数输入
-
onChanged 改变时候触发，参数是输入的内容。
-
onEditingComplete 点击键盘完成按钮(动作按钮)时触发的回调，该回调没有参数。
-
onSubmitted 点击键盘完成按钮(动作按钮)时触发的回调，参数是输入的内容。
-
onTap 点击 input 的时候触发。
-
enabled 是否禁用。如果是 false 不聚焦
image
-
cursorWidth 光标显示宽度
-
cursorRadius 光标显示圆角
-
cursorColor 光标显示颜色。设置
cursorColor: Colors.red, cursorWidth: 16.0, cursorRadius: Radius.circular(16.0)
效果 （为啥不是个圆？？？？）
image
-
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。详情见下。
期望效果：
image
默认的 TextField
image
使用 InputDecoration 美化一下输入框。
1. 加边框
decoration: InputDecoration(
border: OutlineInputBorder(),
),
image
-
设置 placeholder
image
decoration: InputDecoration( border: OutlineInputBorder(), hintText: '请输入姓名', ), -
添加左右图标
image
image
image
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
image
-
suffixIcon 和 suffixText
image
-
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
网友评论