Flutter 中如何自定义表单 Widget？

推荐答案

在 Flutter 中，自定义表单 Widget 通常涉及以下几个步骤：

1. 创建自定义表单 Widget：通过组合现有的 Flutter Widget 来构建自定义表单。
2. 管理表单状态：使用 Form 和 FormField 来管理表单的状态和验证。
3. 处理表单提交：通过 onSaved 和 onChanged 回调来处理表单数据的保存和变化。

以下是一个简单的自定义表单 Widget 示例：

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

class CustomForm extends StatefulWidget {
  @override
  _CustomFormState createState() => _CustomFormState();
}

class _CustomFormState extends State<CustomForm> {
  final _formKey = GlobalKey<FormState>();
  String _name = '';
  String _email = '';

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 处理表单提交逻辑
      print('Name: $_name, Email: $_email');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'Name'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
            onSaved: (value) {
              _name = value!;
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              }
              if (!value.contains('@')) {
                return 'Please enter a valid email';
              }
              return null;
            },
            onSaved: (value) {
              _email = value!;
            },
          ),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

本题详细解读

1. 创建自定义表单 Widget

在 Flutter 中，自定义表单 Widget 通常是通过组合现有的 Widget 来实现的。在这个例子中，我们创建了一个 CustomForm Widget，它包含两个 TextFormField 和一个 ElevatedButton。

2. 管理表单状态

为了管理表单的状态，我们使用了 Form Widget 和 GlobalKey<FormState>。Form Widget 提供了一个容器来管理表单的状态，而 GlobalKey<FormState> 用于在表单提交时访问表单的状态。

3. 处理表单提交

表单提交通过 onSaved 和 onChanged 回调来处理。onSaved 回调在表单提交时被调用，用于保存表单数据。onChanged 回调在表单字段内容发生变化时被调用，可以用于实时验证或更新 UI。

4. 表单验证

表单验证通过 validator 回调来实现。validator 回调返回一个字符串来表示验证错误，如果返回 null 则表示验证通过。在这个例子中，我们验证了姓名和电子邮件字段是否为空，以及电子邮件是否包含 @ 符号。

5. 表单提交逻辑

表单提交逻辑在 _submitForm 方法中实现。首先，我们检查表单是否通过验证，然后保存表单数据并处理提交逻辑。在这个例子中，我们只是简单地将表单数据打印到控制台。

通过以上步骤，你可以轻松地在 Flutter 中创建自定义表单 Widget，并管理表单的状态和验证。