深入 Flutter TextField，android 开发流程图

• TextInputType.text (Normal complete keyboard)

• TextInputType.number (A numerical keyboard)

• TextInputType.emailAddress (Normal keyboard with an “@”)

• TextInputType.datetime (Numerical keyboard with a “/” and “:”)

• TextInputType.multiline (Numerical keyboard with options to enabled signed and decimal mode)

2.键盘操作按钮行为

更改 TextField 的 textInputAction 可以更改键盘本身的操作按钮。

//发送操作 TextField(textInputAction: TextInputAction.send,),

完整的行为列表太长，这里不做展示了，需要的可以进入 TextInputAction 类查看。

启用或禁用特定 TextField 的自动更正。使用自动更正字段进行设置。这同时也会禁用输入建议。

TextField(autocorrect: false,),

3.文本大写

TextField 提供了一些选项，用来对用户输入的文本大写化。

TextField(textCapitalization: TextCapitalization.sentences,),

1.TextCapitalization.sentences

这是最常见的大写化类型，每个句子的第一个字母被转换成大写。

2.TextCapitalization.characters

大写句子中的所有字符。

![](https://user-gold-cdn.xitu.io/2018/12/14/167aa6fcde9f9335?ima

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

geView2/0/w/1280/h/960/ignore-error/1)

3. TextCapitalization.words

对每个单词首字母大写。

文本对齐

使用 textAlign 属性设置 TextField 内的光标对齐方式。

TextField(textAlign: TextAlign.center,),

光标和文字会从 TextField 组件中间开始。

还有其他属性包括，start, end, left, right, center, justify.

文本样式

我们使用 style 属性来更改 TextField 内部文本的外观。 使用它来更改颜色，字体大小等。这类似于文本小部件中的样式属性，因此我们不会花太多时间来探索它。

TextField(style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),),

更换光标样式

可以直接从 TextField 小部件自定义光标。 您可以更改角落的光标颜色，宽度和半径。 例如，这里我制作一个圆形的红色光标。

TextField(cursorColor: Colors.red,cursorRadius: Radius.circular(16.0),cursorWidth: 16.0,),

控制最大字符数

TextField(maxLength: 4,),

设置 maxLength 属性后，TextField 会默认添加一个长度计数器。

可扩展 TextField

有时，我们需要一个 TextField，当一行完成时会扩展。 在 Flutter 中，它有点奇怪（但很容易）。 为此，我们将 maxLines 设置为 null，默认为 1。 设置为 null 不是我们习以为常的东西，但是它很容易做到。

注意：将 maxLines 属性设置为一个确定的数值，会将 TextField 直接扩大到对应的最大行

TextField(maxLines: 3,)

隐藏文本内容

TextField(obscureText: true,),

装饰 TextField

到目前为止，我们专注于 Flutter 提供的输入功能。 现在我们将实际设计一个花哨的 TextField。 为了装饰 TextField，我们使用带有 InputDecoration 的 decoration 属性。 由于 InputDecoration 类非常庞大，我们将尝试快速查看大多数重要属性。

hint 和 label

hint:

label:

图标

//输入框外图标 TextField(decoration: InputDecoration(icon: Icon(Icons.print)),),//前缀图标 TextField(decoration: InputDecoration(prefixIcon: Icon(Icons.print)),),

//输入框前缀组件 TextField(decoration: InputDecoration(prefix: CircularProgressIndicator(),),),

每个属性像 hint，label 都有各自的 style 设置

1.用 hintstyle 修改 hint 样式

TextField(decoration: InputDecoration(hintText: "Demo Text",hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)),),

2.帮助性提示

和 label 不一样，它会一直显示在输入框下部

TextField(decoration: InputDecoration(helperText: "Hello"),),