Dart/Flutter：如何构建多输入字段表单并实现邮件生成功能

嘿，我来帮你搞定这个邮件表单的实现，结合你提到的InheritedWidget方案，咱们一步步来拆解：

你想用InheritedWidget来统一管理TextField的状态和操作是个不错的选择——它作为组件树的一部分会稳定保留自身值，能避免一层层传递控制器或回调的麻烦。咱们的核心逻辑是：

• 用自定义InheritedWidget承载所有TextField的控制器，以及生成邮件的回调操作
• 表单里的多个TextField通过InheritedWidget获取控制器
• 点击按钮时，从InheritedWidget中收集所有字段数据，触发邮件生成逻辑

1. 自定义InheritedWidget #

这部分是核心，咱们把控制器、回调操作都放在这里，还重写toString方法方便调试：

import 'package:flutter/material.dart';

class FormDataHolder extends InheritedWidget {
  // 传入生成邮件的回调操作
  final Function(Map<String, String>) onGenerateEmail;
  // 统一管理所有TextField的控制器
  final Map<String, TextEditingController> controllers = {
    'senderName': TextEditingController(),
    'recipientEmail': TextEditingController(),
    'emailSubject': TextEditingController(),
    'emailContent': TextEditingController(),
  };

  FormDataHolder({
    Key? key,
    required this.onGenerateEmail,
    required Widget child,
  }) : super(key: key, child: child);

  // 提供全局获取方法，子组件可以直接拿到这个Holder
  static FormDataHolder of(BuildContext context) {
    final holder = context.dependOnInheritedWidgetOfExactType<FormDataHolder>();
    assert(holder != null, 'FormDataHolder未在组件树中找到');
    return holder!;
  }

  @override
  bool updateShouldNotify(FormDataHolder oldWidget) {
    // 当回调操作变化时，通知子组件更新
    return oldWidget.onGenerateEmail != onGenerateEmail;
  }

  @override
  String toString() {
    // 自定义toString返回内容，这里返回当前表单的关键字段预览
    return 'FormDataHolder(发送人: ${controllers['senderName']?.text}, 收件人邮箱: ${controllers['recipientEmail']?.text}, 主题: ${controllers['emailSubject']?.text})';
  }

  // 统一收集所有表单数据的方法
  Map<String, String> collectAllFormData() {
    return controllers.map((key, controller) => MapEntry(key, controller.text));
  }
}

2. 表单页面实现 #

把TextField和按钮整合起来，通过InheritedWidget获取控制器和操作：

class EmailGeneratorForm extends StatelessWidget {
  const EmailGeneratorForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('邮件生成表单')),
      body: FormDataHolder(
        // 这里传入实际的邮件生成逻辑，你可以替换成自己的实现
        onGenerateEmail: (formData) {
          print('开始生成邮件，数据：$formData');
          // 示例：可以调用系统邮件应用填充字段
          // final mailUri = Uri(
          //   scheme: 'mailto',
          //   path: formData['recipientEmail'],
          //   queryParameters: {'subject': formData['emailSubject'], 'body': formData['emailContent']},
          // );
          // await launchUrl(mailUri);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              _buildTextField('你的姓名', 'senderName'),
              const SizedBox(height: 12),
              _buildTextField('收件人邮箱', 'recipientEmail'),
              const SizedBox(height: 12),
              _buildTextField('邮件主题', 'emailSubject'),
              const SizedBox(height: 12),
              _buildTextField('邮件内容', 'emailContent', maxLines: 5),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  final formHolder = FormDataHolder.of(context);
                  // 收集所有字段数据
                  final data = formHolder.collectAllFormData();
                  // 触发邮件生成操作
                  formHolder.onGenerateEmail(data);
                  // 打印自定义的toString内容，方便调试
                  print(formHolder.toString());
                },
                child: const Text('生成邮件'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 封装TextField组件，复用逻辑
  Widget _buildTextField(String hintText, String controllerKey, {int maxLines = 1}) {
    return Builder(
      builder: (context) {
        final controller = FormDataHolder.of(context).controllers[controllerKey]!;
        return TextField(
          controller: controller,
          maxLines: maxLines,
          decoration: InputDecoration(
            hintText: hintText,
            border: const OutlineInputBorder(),
          ),
        );
      },
    );
  }
}

• InheritedWidget的优势：正如你所知，它会在组件树中保留自身状态，所有子组件都能通过FormDataHolder.of(context)直接获取控制器和操作，不用手动层层传递参数，代码更简洁。
• 构造函数传操作：我们把邮件生成的回调通过构造函数传入，这样后续如果需要修改邮件生成逻辑，只需要替换这个回调即可，符合开闭原则。
• 重写toString：这里我让它返回表单关键字段的预览，你可以根据需求修改返回内容，比如加上内容预览或者其他信息，方便调试时查看当前表单状态。

内容的提问来源于stack exchange，提问作者Zoltán Györkei