Flutter表单

Flutter表单是一个常用的用户输入组件，用于收集和验证用户输入的数据。Flutter表单提供了用于构建表单的各种小部件。开发者可以通过使用这些小部件，实现一个美观且实用的表单，以便为用户提供更好的用户体验。

表单输入组件

Flutter的表单输入组件包括：

• TextField：用于单行文本的输入；
• TextFormField：用于验证带标签和错误信息的单行文本；
• DropdownButton：提供下拉列表选择器；
• Radio和RadioListTile：提供单选按钮；
• Checkbox和CheckboxListTile：提供复选框；
• Switch和SwitchListTile：提供切换控制器；
• Slider和RangeSlider：提供滑块组件；
• Date/Time组件：用于选择日期和时间。

构建表单

使用表单的第一步是创建一个Form小部件。该小部件包含用于收集表单数据并进行验证的TextFormFields，以及用于提交表单数据的按钮。Form小部件还对用户输入事件进行监听，从而可以在用户使用表单时进行一些实时响应。

示例代码：

Form(
  key: _formKey,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      TextFormField(
        decoration: const InputDecoration(
          hintText: 'Enter your email',
        ),
        validator: (value) {
          if (value.isEmpty) {
            return 'Please enter some text';
          }
          return null;
        },
      ),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: RaisedButton(
          onPressed: () {
            // Validate returns true if the form is valid, or false
            // otherwise.
            if (_formKey.currentState.validate()) {
              // If the form is valid, display a Snackbar.
              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text('Processing Data')));
            }
          },
          child: Text('Submit'),
        ),
      ),
    ],
  ),
)

在上述代码中，使用Form小部件来包含一个TextFormField。 TextFormFields有一个名为validator的属性，您可以使用它来指定用于验证该字段的回调函数。 当用户提交表单时，使用formKey.currentState.validate()方法进行验证，如果表单成功通过验证，则可以执行相应的操作。

简化表单操作

Flutter提供了一个FormState类，用于管理表单状态和验证。通常情况下，表单检查和提交逻辑应该在表单和FormState之间分离。可以将表单小部件和FormState分别封装在不同的类中，以提高代码可读性和可维护性。

示例代码：

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(
              hintText: 'Enter your email',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar.
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

如上述代码所示，我们通过将MyCustomForm小部件封装在一个StatefulWidget中，以便可以访问FormState变量并进行表单验证。在构建MyCustomForm时，请确保包含全局密钥，以用于访问表单状态。 在该示例中，表单验证逻辑被放置到了表单小部件中，用户通过调用onPressed回调来提交表单内容。

总结

Flutter表单是一个重要的输入组件，可以轻松地帮助用户收集和验证数据。我们可以通过使用Flutter的表单小部件来创建一个优雅且实用的表单，在使用Form小部件时，还需要注意分离表单检查和提交逻辑，以提高代码的可读性和可维护性。