内容简介:TextField 组件可以让用户填写信息。 实现 TextField 的代码非常简单:由于 TextFields 组件没有像 Android 中那样的 ID,因此无法根据需要检索文本,而必须在更改时将其存储在变量中或使用控制器。TextField 组件还提供其他回调,例如:
TextField 组件可以让用户填写信息。 实现 TextField 的代码非常简单:
TextField() 复制代码
从TextField中检索信息
由于 TextFields 组件没有像 Android 中那样的 ID,因此无法根据需要检索文本,而必须在更改时将其存储在变量中或使用控制器。
-
最简单的方法是使用 onChanged 方法并将当前值存储在一个变量中。示例代码如下:
String value = ""; TextField( onChanged: (text) { value = text; }, ) 复制代码
-
第二种方法是使用 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 组件还提供其他回调,例如:
- onEditingCompleted
- 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, ), 复制代码
类型有:
- TextInputType.text (普通全键盘)
- TextInputType.number (数字键盘)
- TextInputType.emailAddress (普通键盘,带有“@”符号)
- TextInputType.datetime (数字键盘,带有 “/” 和 “:” 符号)
- 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, ), 复制代码
选项有::
-
TextCapitalization.sentences
这可以使每个句子的首字母大写。
-
TextCapitalization.characters
大写句子中的所有字符。
-
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进阶:深入探究 TextField》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 深入探究 Kubernetes:初识容器
- 深入探究 6 个 React 诡异现象
- Webpack Tree shaking 深入探究
- 深入探究ES6之模块系统
- 深入探究 Objective-C 对象的底层原理
- 深入探究immutable.js的实现机制(二)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。