Flutter FormField Widget是一个用于处理表单的小部件。它使得表单处理变得更加容易，可以处理表单验证、保存表单数据、构建表单输入等。

FormField Widget包含一个子部件，通常是一个表单输入小部件（如TextField、Checkbox、Radio等）。当子部件发生变化时，FormField会自动重新构建以显示新的值。同时，它还包含一个FormState对象，可以用于访问表单状态和执行表单验证操作。

下面是使用FormField的步骤：

1.创建一个FormWidget

首先，您需要创建一个FormWidget，它是一个StatefulWidget，它包含FormState对象，这个对象是用于处理表单状态和验证的。

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: ...,
    );
  }
}

2.添加FormField

接下来，您可以添加FormField小部件到表单中。FormField小部件可以包含各种输入小部件，例如TextField、Checkbox、Radio等。

Copy code
class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String _name;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Name',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
            onSaved: (value) {
              _name = value;
            },
          ),
          RaisedButton(
            child: Text('Submit'),
            onPressed: () {
              if (_formKey.currentState.validate()) {
                _formKey.currentState.save();
                // Do something with _name
              }
            },
          ),
        ],
      ),
    );
  }
}

在上面的示例中，我们添加了一个TextFormField小部件，并设置了验证规则和保存回调函数。当用户提交表单时，我们可以通过FormState对象来验证表单数据，如果验证通过，我们就可以执行保存回调函数。

3.处理表单验证

FormField小部件提供了一个validator属性，可以用于验证表单输入的值是否符合要求。如果验证失败，validator应该返回一个非null的错误消息，否则返回null。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your name';
    }
    return null;
  },
),

在上面的示例中，我们验证了用户是否输入了姓名。如果没有输入姓名，validator会返回一个错误消息。

4.处理表单提交

当用户提交表单时，我们可以通过FormState对象来访问表单数据，并执行相应的操作。

RaisedButton(
  child: Text('Submit'),
  onPressed: () {
    if(_formKey.currentState.validate()) {
        _formKey.currentState.save();
        // Do something with form data
        }
    },
),

在上面的示例中，我们使用FormState对象来验证表单数据，并在验证通过后执行保存回调函数。如果表单验证失败，FormState会自动在FormField上显示相应的错误消息。

5.处理表单重置

如果用户想要重置表单，我们可以使用FormState对象来重置表单数据。

RaisedButton(
  child: Text('Reset'),
  onPressed: () {
    _formKey.currentState.reset();
  },
),

在上面的示例中，我们使用FormState对象来重置表单数据。

6.总结

Flutter FormField Widget是一个用于处理表单的小部件，它可以帮助我们更轻松地处理表单验证、保存表单数据、构建表单输入等操作。要使用FormField，我们需要创建一个FormWidget，并添加FormField小部件到其中。FormField小部件可以包含各种输入小部件，例如TextField、Checkbox、Radio等。同时，我们还可以使用FormState对象来处理表单验证、表单提交和表单重置操作。

FormField

Flutter FormField Widget使用详解