Flutter中父组件如何获取子组件的内部信息？

核心思路 #

让子组件在完成网络请求后，主动把结果通过回调函数传给父组件，父组件维护一个与动态组件列表对应的结果集合，这样既不用重复发起网络请求，也能实时获取每个子组件的处理结果。

步骤1：修改子组件 FoodContainer #

添加回调参数，在网络请求完成后将结果传递给父组件：

class FoodContainer extends StatefulWidget {
  // 用于传递结果的回调函数
  final ValueChanged<dynamic> onResultChanged;
  final Key? key;

  const FoodContainer({
    required this.onResultChanged,
    this.key,
  }) : super(key: key);

  @override
  _FoodContainerState createState() => _FoodContainerState();
}

class _FoodContainerState extends State<FoodContainer> {
  var _result;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      child: TextField(
        onSubmitted: (String s) async {
          // 等待网络请求完成
          final result = await Func(s);
          setState(() {
            _result = result;
          });
          // 将结果回调给父组件
          widget.onResultChanged(result);
        },
      ),
    );
  }

  // 模拟你的网络请求函数
  Future<dynamic> Func(String s) async {
    await Future.delayed(const Duration(seconds: 1));
    return "处理后的结果: $s";
  }
}

步骤2：父组件实现动态管理与结果存储 #

父组件维护子组件列表和对应的结果集合，通过UniqueKey关联子组件与结果，避免增删时索引错乱：

class ParentPage extends StatefulWidget {
  const ParentPage({super.key});

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  // 用Key关联子组件和对应的结果
  final Map<Key, dynamic?> _foodResults = {};
  final List<FoodContainer> _foods = [];

  // 添加新的子组件
  void _addFoodContainer() {
    final key = UniqueKey();
    setState(() {
      _foods.add(FoodContainer(
        key: key,
        onResultChanged: (result) {
          setState(() {
            _foodResults[key] = result;
          });
        },
      ));
      _foodResults[key] = null;
    });
  }

  // 删除最后一个子组件
  void _removeFoodContainer() {
    if (_foods.isNotEmpty) {
      final lastKey = _foods.last.key!;
      setState(() {
        _foods.removeLast();
        _foodResults.remove(lastKey);
      });
    }
  }

  // 查看所有子组件的结果
  void _checkAllResults() {
    print("所有子组件结果：");
    _foodResults.forEach((key, value) {
      print("组件${key.hashCode}：$value");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("动态组件列表")),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _foods.length,
              itemBuilder: (context, index) => _foods[index],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: _addFoodContainer, child: const Text("添加组件")),
              const SizedBox(width: 16),
              ElevatedButton(onPressed: _removeFoodContainer, child: const Text("删除组件")),
              const SizedBox(width: 16),
              ElevatedButton(onPressed: _checkAllResults, child: const Text("查看结果")),
            ],
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }
}

为什么这能解决问题？ #

• 子组件仅在用户提交输入时发起一次网络请求，请求完成后直接把结果传给父组件，完全避免重复请求。
• 父组件通过UniqueKey精准关联每个子组件和它的结果，动态增删组件时不会出现结果匹配错误的情况。
• 不需要依赖TextEditingController反向触发请求，直接复用子组件已经获取到的结果。

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