Flutter TextField（文本输入）

TextField 是一个文本输入组件，类似 Web 上的 Input。

new TextField(
    decoration: const InputDecoration(
        hintText: '帐号/邮箱',
        contentPadding: const EdgeInsets.all(10.0),
    ),
    // 当 value 改变的时候，触发
    onChanged: (val) {
        print(val);
    }
),

TextField 有以下常用属性：

• autocorrect → bool - 是否启用自动更正。
• autofocus → bool - 是否是自动获取焦点。
• controller → TextEditingController - 控制正在编辑的文本。
• decoration → InputDecoration - TextField 的外形描述。
• enabled → bool - 是否禁用。
• focusNode → FocusNode - 是否具有键盘焦点。
• inputFormatters → List<textinputformatter style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box;"></textinputformatter> - 可选的，输入验证和格式化。
• keyboardType → TextInputType - 用于编辑文本的键盘类型。
• maxLength → int - 文本最大的字符串长度。
• maxLengthEnforced → bool - 如果为true，则防止字段允许超过 maxLength 字符。
• maxLines → int - 文本最大行数，默认为 1。多行时应该设置为 > 1。
• obscureText → bool - 是否是隐藏文本（密码形式）。
• onChanged → ValueChanged - 当 value 改变时触发。
• onSubmitted → ValueChanged - 当用户点击键盘的提交时触发。
• style → TextStyle - 文本样式，颜色，字体等。
• textAlign → TextAlign - 设置文本对齐方式。

双向数据绑定

通常需要把 TextField 的数据绑定到组件的状态里，那么在 Flutter 里如何实现呢？那就是使用 controller。

new TextField(
    controller: new TextEditingController(text: this.id),
    decoration: const InputDecoration(
        hintText: '帐号/邮箱',
        contentPadding: const EdgeInsets.all(10.0),
    ),
    onChanged: (val) {
        this.setState(() {
            this.id = val;
        });
    },
),