共计 1920 个字符,预计需要花费 5 分钟才能阅读完成。
刚开始做 Flutter 文本框时候,应用的是TextField
。仿佛大多数状况下都没有问题。代码模式如下:
class _FooState extends State<Foo> {
TextEditingController _controller;
@override
void initState() {super.initState();
_controller = new TextEditingController(text: '初始化内容');
}
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new TextField(
// 当 TextField 第一次创立时,controller 会蕴含初始值,// 当用户批改文本框内容时,会批改 controller 的值。controller: _controller,
),
new RaisedButton(onPressed: () {// 通过 clear()能够清空 controller 的值。_controller.clear();},
child: new Text('清空'),
),
],
);
}
}
问题 1: 动态创建文本框初始值
个别状况下,间接应用这种形式,没有任何问题。然而当初有一种状况:
问题 1: 当页面文本框中的初始值是动静的,从后盾获取到的时候,应该怎么办呢?
这种状况下,阐明创立 TextEditingController
时,并不知道文本内容。这个时候如果动静批改 controller
的话,会报错,基本没法应用。
这种状况我基本没遇到过,然而我感觉 Flutter 必定有解决办法。所以我去找了一下 Flutter 的文档,总算是没有白找,找到了一个(https://api.flutter.dev/flutt…[组件] TextFormField
。
文档中有一句:
If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.
意思就是说,当不指定 controller 时,initialValue 就能够主动生成 controller 的初始值。
既然有解决方案,那么就是批改一下代码即可。
class _FooState extends State<Foo> {
@override
void initState() {super.initState();
}
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new TextFormField(initialValue: "初始值"),
],
);
}
}
通过 TextFormField
这个组件,轻松解决掉这个问题了。
问题 2: TextField 和 TextFormField 的区别?
问题尽管解决了,然而当初又有另外一个问题了:
问题 2: TextField 和 TextFormField 的区别是什么?什么时候应用 TextField?什么时候应用 TextFormField?
TextFormField:
例如制作一个表单,表单中有用户姓名,姓名必须蕴含 @
符号。这个时候就须要应用 TextFormField
这个组件
TextFormField(
autovalidateMode: AutovalidateMode.always, // 开启主动验证
decoration: const InputDecoration(icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onSaved: (String value) {// 当用户保留表单时,返回内容。},
validator: (String value) { // 表单验证
return value.contains('@') ? 'Do not use the @ char.' : null;
},
)
TextField:
例如制作一个显示文本框,框中提醒输出文本框中的内容信息。
TextField(
obscureText: true,
decoration: InputDecoration(border: OutlineInputBorder(),
labelText: 'Password',
),
)
总结:
- 如果须要应用保留、重置、验证用户输出的状况下,应用
TextFormField
。 - 如果只须要简略的捕捉用户的输出行为,只须要应用
TextField
组件即可。 - TextFormField 须要个 Form 组件。