Flutter 构建动态表单：Form、FormField 和 TextFormField
2023-11-16 15:07:12
- Form 控件概述
Form 控件是表单的核心组件，它负责管理表单的整体结构和行为。使用 Form 控件可以轻松实现表单的提交、重置和数据校验。Form 控件的常用属性如下：
- key：Form 控件的唯一标识符，用于在 Flutter 中查找和引用该控件。
- child：Form 控件包含的子控件，可以是 TextFormField、FormField 等。
2. FormField 控件概述
FormField 控件是一个抽象类，它为表单中的单个输入字段提供了基础结构。FormField 控件的常用属性如下：
- key：FormField 控件的唯一标识符，用于在 Flutter 中查找和引用该控件。
- child：FormField 控件包含的子控件，通常是 TextFormField。
- validator：一个回调函数，用于对FormField 控件中的值进行校验。
- onSaved：一个回调函数，用于在表单提交时保存FormField 控件中的值。
3. TextFormField 控件概述
TextFormField 控件是Flutter 中最常用的表单控件之一，它可以用来创建单行文本输入框、多行文本输入框和密码输入框。TextFormField 控件的常用属性如下：
- key：TextFormField 控件的唯一标识符，用于在 Flutter 中查找和引用该控件。
- controller：一个 TextEditingController 对象，用于管理TextFormField 控件中的文本。
- decoration：一个 InputDecoration 对象，用于设置TextFormField 控件的装饰样式，如边框、填充和标签。
- validator：一个回调函数，用于对TextFormField 控件中的值进行校验。
- onSaved：一个回调函数，用于在表单提交时保存TextFormField 控件中的值。
4. 表单校验
Form 控件提供了强大的表单校验功能，可以通过设置FormField 控件的 validator 属性来实现。validator 属性是一个回调函数，它接收FormField 控件中的值作为参数，并返回一个错误消息。如果 validator 函数返回 null，则表示该字段的值是合法的；否则，则表示该字段的值是无效的，并会显示错误消息。
5. 实际应用示例
为了更好地理解这些控件的用法，我们来看一个实际应用示例。假设我们要创建一个登录表单，需要收集用户名和密码。我们可以使用以下代码来创建这个表单：
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Username cannot be empty';
}
return null;
},
),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Password cannot be empty';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// Submit the form
}
},
child: Text('Login'),
),
],
),
),
);
}
}
在这个示例中，我们首先定义了一个Form 控件，并使用 GlobalKey
总结
Form、FormField 和 TextFormField 控件是 Flutter 中构建表单的必备组件。这些控件提供了强大的特性和功能，可以帮助您轻松创建动态表单，并对用户输入的数据进行合法性校验。通过阅读本文，您已经掌握了构建动态表单的技巧，并能够轻松实现用户输入的数据校验。希望本文对您有所帮助！
