【Flutter】表单 - Input

2019-03-24 本文已影响95人 diva_dance

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

【Flutter】表单 - Input

Input 用于输入，获取用户填写的信息。

猜你喜欢

热点阅读