Flutter嵌套表单组件中如何获取子组件的表单数据？

方案1：状态提升（推荐） #

把VariantList的核心状态（variantControllers列表）移到主表单组件ProductsFormState中，子组件仅负责UI渲染和触发状态变更，父组件可直接访问所有变体数据，这是Flutter中组件间共享状态的常用方案。

修改步骤： #

1. 主表单组件调整：

   class ProductsFormState extends State<ProductsForm> {
     final _formKey = GlobalKey<FormState>();
     final TextEditingController _productNameController = TextEditingController();
     // 将变体控制器列表移到父组件
     final List<VariantControllers> variantControllers = [];
   
     @override
     void initState() {
       super.initState();
       // 初始化第一个变体行
       variantControllers.add(VariantControllers(
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
       ));
     }
   
     // 添加新变体的方法
     void _addVariant() {
       setState(() {
         variantControllers.add(VariantControllers(
           TextEditingController(),
           TextEditingController(),
           TextEditingController(),
           TextEditingController(),
         ));
       });
     }
   
     // 删除指定索引的变体
     void _removeVariant(int index) {
       if (variantControllers.length > 1) {
         setState(() {
           variantControllers.removeAt(index);
         });
       }
     }
   
     void _submitForm() async {
       if (_formKey.currentState!.validate()) {
         // 直接从variantControllers提取数据
         final variants = variantControllers.map((vc) => {
               'size': vc.size.text,
               'items': vc.items.text,
               'cost': vc.cost.text,
               'mrp': vc.mrp.text,
             }).toList();
         print('变体数据：$variants');
         // 后续提交逻辑
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.all(16.0),
         child: Form(
           key: _formKey,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               // 其他表单字段...
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   const FormTitle(text: 'Product Variants'),
                   Row(
                     children: [
                       Expanded(
                         child: VariantList(
                           selectedUnit: '', // 传入实际的selectedUnit值
                           variantControllers: variantControllers,
                           onAddVariant: _addVariant,
                           onRemoveVariant: _removeVariant,
                         ),
                       ),
                     ],
                   ),
                 ],
               ),
               const SizedBox(height: 16),
               ElevatedButton(
                 onPressed: _submitForm,
                 child: const Text('Submit'),
               ),
             ],
           ),
         ),
       );
     }
   }
   

2. 子组件VariantList调整：
   改为无状态组件，通过构造函数接收父组件传递的状态和回调方法：

   class VariantList extends StatelessWidget {
     final String selectedUnit;
     final List<VariantControllers> variantControllers;
     final VoidCallback onAddVariant;
     final Function(int) onRemoveVariant;
   
     const VariantList({
       super.key,
       required this.selectedUnit,
       required this.variantControllers,
       required this.onAddVariant,
       required this.onRemoveVariant,
     });
   
     Widget VariantRows(VariantControllers controllers, int index) {
       return Padding(
         padding: const EdgeInsets.symmetric(vertical: 5.0),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Flexible(
                 flex: 3,
                 child: DataRowInputField(
                   controller: controllers.size,
                 )),
             const SizedBox(width: 8),
             Flexible(
               flex: 2,
               child: DataRowInputField(controller: controllers.items),
             ),
             const SizedBox(width: 8),
             Flexible(
               flex: 2,
               child: DataRowInputField(controller: controllers.cost),
             ),
             const SizedBox(width: 8),
             Flexible(
               flex: 2,
               child: DataRowInputField(controller: controllers.mrp),
             ),
             const SizedBox(width: 8),
             IconButton(
               onPressed: () => onRemoveVariant(index),
               icon: const Icon(
                 Icons.close_outlined,
                 color: Colors.black54,
               ),
             ),
           ],
         ),
       );
     }
   
     @override
     Widget build(BuildContext context) {
       return Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           const Row(
             children: [
               Expanded(flex: 3, child: Text('Size')),
               SizedBox(width: 8),
               Expanded(flex: 2, child: Text('Items')),
               SizedBox(width: 8),
               Expanded(flex: 2, child: Text('Cost')),
               SizedBox(width: 8),
               Expanded(flex: 2, child: Text('MRP')),
               SizedBox(width: 8),
               IconButton(onPressed: null, icon: Icon(Icons.more_horiz_outlined)),
             ],
           ),
           ...variantControllers.asMap().entries.map(
                 (entry) => VariantRows(entry.value, entry.key),
               ),
           const SizedBox(height: 10.0),
           InkWell(
               onTap: onAddVariant,
               child: const Text("Add more", style: TextStyle(color: Colors.blue))),
         ],
       );
     }
   }
   

方案2：使用GlobalKey访问子组件方法 #

如果不想移动状态，可以给子组件绑定GlobalKey，在父组件中调用子组件暴露的方法获取数据。

修改步骤： #

1. 主表单组件添加GlobalKey：

   class ProductsFormState extends State<ProductsForm> {
     final _formKey = GlobalKey<FormState>();
     // 绑定子组件的状态类
     final _variantListKey = GlobalKey<_VariantListState>();
     final TextEditingController _productNameController = TextEditingController();
   
     void _submitForm() async {
       if (_formKey.currentState!.validate()) {
         // 调用子组件暴露的方法获取数据
         final variants = _variantListKey.currentState?.getVariantData();
         print('变体数据：$variants');
         // 后续提交逻辑
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.all(16.0),
         child: Form(
           key: _formKey,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               // 其他表单字段...
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   const FormTitle(text: 'Product Variants'),
                   Row(
                     children: [
                       Expanded(
                         child: VariantList(
                           key: _variantListKey,
                           selectedUnit: '', // 传入实际的selectedUnit值
                         ),
                       ),
                     ],
                   ),
                 ],
               ),
               const SizedBox(height: 16),
               ElevatedButton(
                 onPressed: _submitForm,
                 child: const Text('Submit'),
               ),
             ],
           ),
         ),
       );
     }
   }
   

2. 子组件暴露获取数据的方法：

   class _VariantListState extends State<VariantList> {
     final List<VariantControllers> variantControllers = [];
   
     @override
     void initState() {
       super.initState();
       variantControllers.add(VariantControllers(
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
       ));
     }
   
     // 暴露给父组件的获取数据方法
     List<Map<String, String>>? getVariantData() {
       return variantControllers.map((vc) => {
             'size': vc.size.text,
             'items': vc.items.text,
             'cost': vc.cost.text,
             'mrp': vc.mrp.text,
           }).toList();
     }
   
     // 其他原有代码不变...
   }
   

方案3：使用状态管理工具（如Provider/Riverpod） #

如果表单结构复杂、多个组件需要共享数据，可使用状态管理库统一管理表单状态。以Riverpod为例：

示例： #

1. 定义表单状态提供者：

   final productFormProvider = StateNotifierProvider<ProductFormNotifier, ProductFormState>((ref) {
     return ProductFormNotifier();
   });
   
   class ProductFormState {
     final String productName;
     final List<VariantControllers> variants;
   
     ProductFormState({required this.productName, required this.variants});
   
     ProductFormState copyWith({String? productName, List<VariantControllers>? variants}) {
       return ProductFormState(
         productName: productName ?? this.productName,
         variants: variants ?? this.variants,
       );
     }
   }
   
   class ProductFormNotifier extends StateNotifier<ProductFormState> {
     ProductFormNotifier() : super(ProductFormState(productName: '', variants: [
       VariantControllers(
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
         TextEditingController(),
       )
     ]));
   
     void addVariant() {
       state = state.copyWith(
         variants: [...state.variants, VariantControllers(
           TextEditingController(),
           TextEditingController(),
           TextEditingController(),
           TextEditingController(),
         )]
       );
     }
   
     void removeVariant(int index) {
       if (state.variants.length > 1) {
         final newVariants = List.from(state.variants);
         newVariants.removeAt(index);
         state = state.copyWith(variants: newVariants);
       }
     }
   }
   

2. 组件中使用状态：
   主组件提交时直接从productFormProvider获取变体数据，子组件通过ref.watch监听状态变化，并调用提供者的方法修改状态。

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