Flutter TextField vs TextFormField

Question

在flutter中TextField和TextFormField之间有什么区别？两者看起来都一样。我应该用哪一个？你推荐哪一个？我这样使用TextField：

const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
)

Answer 1

TextFormField主要有validator参数，而TextField没有：如果输入有效，它必须返回null，如果有错误，它必须返回来String(通常String本身包含有关错误的信息(。这个参数允许您以一种非常简单的方式验证用户输入，前提是您在Form小部件中包括表单字段(除了TextFormField之外还有其他字段(，并且您将Key应用于Form。

如果所有操作都正确，您只需调用formKey.currentState!.validate()，Flutter就会自动为添加到Form中的每个表单字段调用validator参数。如果一切正常，validate将返回true，您可以继续执行程序逻辑。否则，它将返回false，并在包含错误数据的表单字段附近显示validator返回的String。

这个例子取自Flutter关于表单的食谱：

[...]
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}

Answer 2

使用Form小部件时使用TextFormField。结合Form小部件，您可以制作更复杂的表单+整个表单的验证。

TextField基本上是一个TextFormField，但您不必将其包含在Form小部件中，验证的工作方式也会有所不同。