Flutter进阶：深刻探究 TextField

TextField 介绍

TextField 组件可让用户填写信息。 实现 TextField 的代码很是简单：

TextField()
复制代码

从TextField中检索信息

因为 TextFields 组件没有像 Android 中那样的 ID，所以没法根据须要检索文本，而必须在更改时将其存储在变量中或使用控制器。

1. 最简单的方法是使用 onChanged 方法并将当前值存储在一个变量中。示例代码以下：

   String value = "";
   TextField(
     onChanged: (text) {
       value = text;
     },
   )
   复制代码

2. 第二种方法是使用 TextEditingController 。 控制器链接到 TextField ，让咱们也能够监听和控制 TextField 的内容。

   TextEditingController controller = TextEditingController();
   TextField(
     controller: controller,
   )
   复制代码

   咱们能够这样监听变化

   controller.addListener(() {
     // Do something here
   });
   复制代码

   获取、设置文本内容：

   print(controller.text); // Print current value
   controller.text = "Demo Text"; // Set new value
   复制代码

TextField 中其余的回调

TextField 组件还提供其余回调，例如：

1. onEditingCompleted
2. onSubmitted

onEditingComplete: () {},
onSubmitted: (value) {},
复制代码

这些是在用户单击 iOS 上的“完成”按钮时调用的回调。

在 TextField 中使用焦点

在 TextField 上“聚焦”意味着激活 TextField ，键盘的任何输入都将致使在聚焦的 TextField 中输入数据。

1. 使其自动聚焦

要在建立窗口时在 TextField 上自动对焦，请将自动对焦字段设置为 true 。

TextField(
  autofocus: true,
),
复制代码

默认状况下，这会将焦点设置在 TextField 上。

2.自定义更改焦点

若是咱们想要改变焦点而不只仅是自动对焦怎么办？ 看下面代码 ，咱们将 FocusNode 附加到 TextField 并使用它来切换焦点。

// Initialise outside the build method
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();
// Do this inside the build method
TextField(
  focusNode: nodeOne,
),
TextField(
  focusNode: nodeTwo,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeTwo);
  },
  child: Text("Next Field"),
),
复制代码

咱们建立两个焦点节点并将它们附加到 TextFields 。 按下按钮时，咱们使用 FocusScope 请求焦点到下一个TextField。

更改 TextFields 的键盘属性

Flutter 中的 TextField 容许咱们自定义与键盘相关的属性。

1.键盘类型

TextField 容许您自定义在 TextField 成为焦点时显示的键盘类型。 咱们更改 keyboardType 属性。

TextField(
  keyboardType: TextInputType.number,
),	
复制代码

类型有：

1. TextInputType.text (普通全键盘)
2. TextInputType.number (数字键盘)
3. TextInputType.emailAddress (普通键盘，带有“@”符号)
4. TextInputType.datetime (数字键盘，带有 “/” 和 “:” 符号)
5. TextInputType.multiline (数字键盘，带有启用有符号和十进制模式的选项)

2.TextInputAction

更改 TextField 的 textInputAction 能够更改键盘自己的操做按钮。

例如：

TextField(
  textInputAction: TextInputAction.continueAction,
),
复制代码

这会致使 “Done” 按钮被 “Continue” 按钮替换：

或者：

TextField(
  textInputAction: TextInputAction.send,
),
复制代码

还有不少类型，这里不一一列举。

3.自动更正

启用或禁用特定 TextField 的自动更正。 使用自动更正字段进行以下设置。

TextField(
  autocorrect: false,
),
复制代码

这将禁用更正。

4.文本大写

TextField 提供了一些有关如何使用户输入中的字母大写的选项。

TextField(
  textCapitalization: TextCapitalization.sentences,
),
复制代码

选项有：：

1. TextCapitalization.sentences

   这可使每一个句子的首字母大写。

   

2. TextCapitalization.characters

   大写句子中的全部字符。

   

3. TextCapitalization.words

   大写每一个单词的首字母。

   

Text Style, Alignment 和 Cursor

Flutter 容许自定义 TextField 内的文本样式和对齐方式以及 TextField 内的光标。

TextField 内的文本对齐方式

使用 textAlign 属性调整 TextField 中光标的位置。

TextField(
  textAlign: TextAlign.center,
),
复制代码

一般的对齐属性有：start, end, left, right, center, justify.

在 TextField 中设置文本样式

咱们使用 style 属性来更改 TextField 内部文本的样式。 使用它来更改颜色，字体大小等。这相似于文本组件中的样式属性，这里咱们很少作介绍。

TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),
复制代码

更改 TextField 中的光标

能够直接自定义 TextField 组件的光标。

您能够更改光标颜色，宽度和半径。 例如，在这里我自定义了一个圆形红色光标。

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),
复制代码

控制 TextField 中的大小和最大长度

TextFields 能够控制其中写入的最大字符数、最大行数并在键入文本时展开。

控制最大字符数

TextField(
  maxLength: 4,
),
复制代码

经过设置 maxLength 属性，将强制执行最大长度，而且默认状况下会将计数器添加到 TextField 。

制做可扩展的TextField

有时，咱们须要 TextField 当一行完成时会扩展。 在Flutter中，作法有点奇怪（但很容易）。 咱们将 maxLines 设置为 null ，默认为1。

注意：默认状况下，将 maxLines 设置为直接值会将其自动扩展为该行数。

TextField(
  maxLines: 3,
)
复制代码

模糊文字

要隐藏 TextField 中的文本，请将 obscureText 设置为true 。

TextField(
  obscureText: true,
),
复制代码

装饰 TextField

至此，咱们专一于 Flutter 提供的输入功能。 如今咱们来实际设计一个漂亮的 TextField 。

为了装饰 TextField，咱们使用了带有 InputDecoration 的 decoration 属性。 因为 InputDecoration 类很是庞大，咱们快速过一遍它的重要属性。

使用提示和标签属性向用户提供信息

提示和标签都是字符串，可帮助用户理解要在 TextField 中输入的信息。 不一样之处在于，当标签浮动在 TextField上时，一旦用户开始输入，提示就会消失。

您可使用 “icon”，“prefixIcon” 和 “suffixIcon” 添加图标

您能够直接向 TextFields 添加图标。 您也可使用 prefixText 和 suffixText 代替 Text。

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
),
复制代码

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
),
复制代码

对于其余任何组件，使用 “prefix” 而不是 “prefixIcon”

要使用通用组件而不是仅仅一个图标，请使用 prefix field 。让咱们在 TextField 中添加一个圆形进度框。

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),
复制代码

像 hint ，label 等每一个属性都有各自的样式字段

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

注意：虽然我在此示例中这样操做，但一般不会更改提示颜色。

若是您不想要标签而想要为用户提供持久消息，请使用 “helperText” 。

TextField(
  decoration: InputDecoration(
    helperText: "Hello"
  ),
),
复制代码

使用 “decoration：null” 或 InputDecoration.collapsed 删除 TextField 上的默认下划线

使用这些删除 TextField 上的默认下划线。

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
),

复制代码

使用 “border” 为 TextField 设置边框

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
),

复制代码

您能够进一步作大量的装饰，我不可能将全部你须要的样式作出来。 但我但愿这我已经让你知道怎么将它作出来！

最后

利用时间整理分析本身所学的知识是件很是有意义的事情，但愿这也能帮到其余正在学习的同窗。同时我也正在用Flutter写几个项目，写好以后就会开源给你们。

Github：github.com/MeandNi

微信：yangjk128

原文博客：meandni.com/2019/01/26/…

欢迎一块儿交流移动开发的技术！

参考连接

原英文博客

官方文档