【Flutter】表单 - Input

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

2. 设置 placeholder

   
   
   image

   decoration: InputDecoration(
      border: OutlineInputBorder(),
      hintText: '请输入姓名',
   ),
   

3. 添加左右图标

   
   
   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