Flutter中如何从子widget表单获取值传递到父widget完成整体提交

• 首先在子Widget对应的State类中定义公开的获取表单值的方法，比如Map<String, dynamic> getFormData()，返回子Widget内所有表单字段的键值对
• 父Widget中创建GlobalKey<子WidgetState类名>实例，将这个key传给子Widget的构造参数
• 父Widget点击提交按钮时，通过key.currentState?.getFormData()拿到子Widget的表单数据，和父Widget自己的姓名字段数据合并后提交即可

示例代码：

// 子Widget定义
class AddressForm extends StatefulWidget {
  const AddressForm({super.key});

  @override
  State<AddressForm> createState() => _AddressFormState();
}

class _AddressFormState extends State<AddressForm> {
  final _addressController = TextEditingController();
  final _postCodeController = TextEditingController();

  // 公开的取值方法
  Map<String, dynamic> getFormData() {
    return {
      "address": _addressController.text,
      "postCode": _postCodeController.text,
      // 其他子表单字段
    };
  }

  @override
  Widget build(BuildContext context) {
    // 子表单的UI实现，此处省略
    return Column(
      children: [
        TextField(controller: _addressController, decoration: const InputDecoration(labelText: "申请人地址")),
        TextField(controller: _postCodeController, decoration: const InputDecoration(labelText: "邮编")),
      ],
    );
  }
}

// 父Widget中使用
class ParentFormPage extends StatefulWidget {
  const ParentFormPage({super.key});

  @override
  State<ParentFormPage> createState() => _ParentFormPageState();
}

class _ParentFormPageState extends State<ParentFormPage> {
  final _nameController = TextEditingController();
  // 声明子Widget的GlobalKey
  final _addressFormKey = GlobalKey<_AddressFormState>();

  _submitForm() {
    // 取父字段值
    final name = _nameController.text;
    // 取子字段值
    final addressData = _addressFormKey.currentState?.getFormData() ?? {};
    // 合并后得到完整提交数据
    final submitData = {
      "name": name,
      ...addressData,
    };
    // 执行提交逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: _nameController, decoration: const InputDecoration(labelText: "申请人姓名")),
        AddressForm(key: _addressFormKey), // 给子Widget传入定义好的key
        ElevatedButton(onPressed: _submitForm, child: const Text("提交")),
      ],
    );
  }
}

注意：这种方案适合子表单逻辑独立、不需要和父Widget频繁联动的场景。

• 父Widget中提前定义保存所有表单数据的变量，包含父字段和子字段对应的key
• 给子Widget的构造参数增加一个ValueChanged<Map<String, dynamic>>类型的回调，子表单内任意字段变更时，都通过这个回调把最新的所有子表单数据传给父层
• 父层收到回调后更新自己保存的表单数据变量，提交时直接用父层已同步的完整数据即可
• 不需要用到GlobalKey，适合父子表单字段需要联动的场景

如果你的项目已经接入了Provider、Bloc、GetX之类的状态管理库，可以把整个表单的数据存在全局的状态实例中，父子Widget都直接读写这个状态实例，提交时直接从全局状态取完整数据即可，适合表单逻辑复杂、多组件深度嵌套的场景。

内容的提问来源于stack exchange，提问作者user16896309