Flutter：如何从Stateful父Widget调用子Widget的方法？

我有两个文件：Parent.dart 和 Child.dart，代码如下：

Parent.dart #

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

  @override
  State<Parent> createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.add_box),
      onPressed: () {
        // 想要在这里调用子Widget的方法
      },
    );
  }
}

Child.dart #

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

  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  void myFunction() {
    // 执行一些操作
  }
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

我已经能实现父向子传数据、子调用父方法，但现在需要从父Widget中调用子Widget的方法，请问点击按钮时怎么调用子Widget里的myFunction()？

方法一：使用GlobalKey #

这是Flutter中父调用子方法最直接的实现方式，步骤如下：

1. 在父Widget的状态类中定义GlobalKey，关联子Widget的状态类型：

class _ParentState extends State<Parent> {
  // 定义GlobalKey，指定关联子Widget的State
  final GlobalKey<_ChildState> _childKey = GlobalKey<_ChildState>();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
          icon: Icon(Icons.add_box),
          onPressed: () {
            // 通过key获取子Widget的State，调用目标方法
            _childKey.currentState?.myFunction();
          },
        ),
        // 将key传入子Widget
        Child(key: _childKey),
      ],
    );
  }
}

注意：使用?.避免子Widget未挂载时currentState为空导致的异常。

2. 子Widget无需额外修改，它的构造函数默认支持接收key参数。

方法二：使用状态触发（推荐复杂场景） #

如果不想直接依赖GlobalKey，或项目已有状态管理机制，可以通过状态变量触发子Widget执行方法，这种方式更符合Flutter的状态驱动思想：

1. 父Widget中定义一个ValueNotifier作为触发信号：

class _ParentState extends State<Parent> {
  final ValueNotifier<bool> _triggerChildMethod = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
          icon: Icon(Icons.add_box),
          onPressed: () {
            // 修改状态值，触发子Widget的监听逻辑
            _triggerChildMethod.value = !_triggerChildMethod.value;
          },
        ),
        // 将触发信号传给子Widget
        Child(trigger: _triggerChildMethod),
      ],
    );
  }
}

2. 子Widget接收并监听这个信号，触发目标方法：

class Child extends StatefulWidget {
  final ValueNotifier<bool> trigger;
  const Child({super.key, required this.trigger});

  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  void myFunction() {
    // 执行自定义操作
    print("子Widget方法已执行");
  }

  @override
  void initState() {
    super.initState();
    // 监听父Widget传来的触发信号
    widget.trigger.addListener(myFunction);
  }

  @override
  void dispose() {
    // 销毁时移除监听，避免内存泄漏
    widget.trigger.removeListener(myFunction);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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