(4)、Study Flutter TextField Widg

由于前面两篇文章，代码都没有得到保存。所以接下来的文章将会上传到Github上。

在上篇文章中我介绍了Image Widget组件的相关属性介绍。这篇文章将对输入框组件TextField Widget进行介绍和学习。

TextField 属性介绍

允许用户使用硬件键盘或屏幕键盘输入文本组件。

只要用户更改组件中的文本，文本组件就会调用onChanged回调。如果用户指示他们已完成在组件中键入（例如，通过按下软键盘上的按钮），则文本组件调用onSubmitted回调。

TextField 包含以下属性：

QQ截图20190107161312.png

• decoration输入框的装饰

可以设置边框、错误提示、错误样式、图标等，如下：

GIF.gif

• textInputAction键盘上的一些按钮动作，如完成，搜索按钮等

• textCapitalization 配置文本输入类型，字、句子、字符、无

child: TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.add),
              labelText: "请输入内容",
              border: OutlineInputBorder(),
            ),
            textCapitalization: TextCapitalization.sentences,
          ),

QQ截图20190108094659.png

• style配置文本样式

• textAlign文本水平对齐方式

• textDirection 文本方向

• autofocus是否自动获得焦点

• obscureText是否隐藏正在编辑的文本，默认false

• autocorrect是否自动更正文本。

• maxLines输入文本最大行数

• maxLength输入文本最大长度

• maxLengthEnforced 是否强制启用maxLength字段值，默认true

• onChanged当文本正在编辑的时候调用。返回文本内容

 child: TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.add),
              labelText: "请输入内容",
              border: OutlineInputBorder(),
            ),
            textCapitalization: TextCapitalization.sentences,
            obscureText: true, //是否隐藏正在编辑的文本
            onChanged: (string) {
              print(string);
            },
          ),

然后在run窗口查看：

QQ截图20190108104453.png

• onEditingComplete当用户点击键盘上的完成按钮时调用。
• onSubmitted当用户提交完成时调用
• inputFormatters用户输入内容格式化。
• enabled是否可用
  -cursorWidth游标宽度
  -cursorRadius游标圆角

cursorWidth: 20.0,
cursorRadius: Radius.circular(20.0),

如图：

GIF.gif

-cursorColor游标颜色

• keyboardAppearance键盘外观，黑夜模式，白天模式。需要键盘本身支持
• enableInteractiveSelection如果为真，长按显示复制，剪切等选项
  -onTap当点击textfield是调用，一般处理用户的手势