Flutter表单组件插件form_components的使用

在Flutter开发中，从组件获取数据时可能会遇到碎片化问题。Flutter团队建议通过创建类型控制器并订阅来接收数据。具体可以参考官方文档：获取用户输入。

然而，这种解决方案存在一些问题：

• 需要增加大量代码行。
• 必须记得在StatefulWidget中销毁控制器，否则可能导致内存泄漏。
• 可能需要手动处理组件的默认值重置。
• 在List或DataTable组件中可能无法正常工作。

为了解决这些问题，form_components插件提供了更简便的方式来处理表单组件。

简单示例

以下是一个简单的示例，展示了如何使用form_components插件来创建表单组件。

import 'package:flutter/material.dart';
import 'package:form_components/form_components.dart';

// 定义表单模型
class FormModel {
  final String type;
  final Key key;
  final String value;
  final Function(String)? validator;

  FormModel({required this.type, required this.key, required this.value, this.validator});
}

// 创建表单组件
Widget createComponent(FormModel model) {
  switch (model.type) {
    case 'email':
      return FormEmailField(
        key: model.key,
        initialValue: model.value,
        validator: model.validator,
      );
    case 'password':
      return FormPasswordField(
        key: model.key,
        initialValue: model.value,
        validator: model.validator,
      );
    case 'switch':
      return FormSwitch(
        key: model.key,
        initialValue: model.value == 'true',
      );
    case 'checkbox':
      return FormCheckbox(
        key: model.key,
        initialValue: model.value == 'true',
      );
    case 'dropdown':
      return FormDropdown(
        key: model.key,
        initialValue: model.value,
        items: const [
          {'opt1': 'Option1'},
          {'opt2': 'Option2'},
          {'opt3': 'Option3'}
        ],
        onSelected: (selection) {
          debugPrint('You just selected $selection');
        },
      );
    case 'autocomplete':
      return FormAutocomplete<String>(
        key: model.key,
        initialValue: model.value,
        optionsBuilder: (TextEditingValue textEditingValue) {
          return ['Option1', 'Option2', 'Option3'].where((String option) {
            return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (String selection) {
          debugPrint('You just selected $selection');
        },
      );
    default:
      return Container();
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Components Demo'),
        ),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

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

  // 表单模型列表
  final List<FormModel> formModels = [
    FormModel(type: 'email', key: UniqueKey(), value: ''),
    FormModel(type: 'password', key: UniqueKey(), value: ''),
    FormModel(type: 'switch', key: UniqueKey(), value: 'false'),
    FormModel(type: 'checkbox', key: UniqueKey(), value: 'false'),
    FormModel(type: 'dropdown', key: UniqueKey(), value: ''),
    FormModel(type: 'autocomplete', key: UniqueKey(), value: ''),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: formKey,
        child: Column(
          children: formModels.map((model) => createComponent(model)).toList()
            ..add(ElevatedButton(
              child: const Text('Submit'),
              onPressed: () {
                if (formKey.currentState!.validate()) {
                  // 提交表单
                  debugPrint('Form submitted successfully!');
                  formKey.currentState!.reset(); // 重置表单
                }
              },
            )),
        ),
      ),
    );
  }
}