刚开始作Flutter文本框时候,使用的是TextField。彷佛大多数状况下都没有问题。代码形式以下:html
class _FooState extends State {
TextEditingController _controller;
@override
void initState() {
super.initState();
_controller = new TextEditingController(text: '初始化内容');
}
@override
Widget build(BuildContext context) {
return new Column(
children: [
new TextField(
// 当TextField 第一次建立时,controller会包含初始值,
// 当用户修改文本框内容时,会修改controller的值。
controller: _controller,
),
new RaisedButton(
onPressed: () {
// 经过clear()能够清空controller的值。
_controller.clear();
},
child: new Text('清空'),
),
],
);
}
}
问题1:动态建立文本框初始值
通常状况下,直接使用这种方式,没有任何问题。可是如今有一种状况:api
问题1:当页面文本框中的初始值是动态的,从后台获取到的时候,应该怎么办呢?
这种状况下,说明建立TextEditingController时,并不知道文本内容。这个时候若是动态修改controller的话,会报错,根本无法使用。ide
这种状况我根本没遇到过,可是我以为Flutter确定有解决方法。因此我去找了一下Flutter的文档,总算是没有白找,找到了一个(https://api.flutter.dev/flutt... TextFormField。ui
文档中有一句:spa
If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.
意思就是说,当不指定controller时,initialValue 就能够自动生成controller的初始值。code
既然有解决方案,那么就是修改一下代码便可。orm
class _FooState extends State {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new Column(
children: [
new TextFormField(
initialValue: "初始值"
),
],
);
}
}
经过TextFormField这个组件,轻松解决掉这个问题了。htm
问题2: TextField和TextFormField的区别?
问题虽然解决了,可是如今又有另一个问题了:ci
问题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组件。