Flutter中顶层Widget触发事件时调用深层子Widget函数

1. 回调函数逐层传递 #

适合Widget层级较少的场景，直接把Widget4的方法通过父组件逐层传递到Widget1，触发时调用即可。

修改后的代码示例：

class Widget1 extends StatelessWidget {
  final VoidCallback onTrigger;

  const Widget1({super.key, required this.onTrigger});

  void someEvent() {
    if (true) { // 这里替换为你的实际条件判断
      onTrigger(); // 调用传递过来的回调
    }
  }

  @override
  Widget build(BuildContext context) {
    return Widget2(onTrigger: onTrigger);
  }
}

class Widget2 extends StatelessWidget {
  final VoidCallback onTrigger;

  const Widget2({super.key, required this.onTrigger});

  @override
  Widget build(BuildContext context) {
    return Widget3(onTrigger: onTrigger);
  }
}

class Widget3 extends StatelessWidget {
  final VoidCallback onTrigger;

  const Widget3({super.key, required this.onTrigger});

  @override
  Widget build(BuildContext context) {
    return Widget4(onTrigger: onTrigger);
  }
}

class Widget4 extends StatelessWidget {
  final VoidCallback onTrigger;

  const Widget4({super.key, required this.onTrigger});

  void someFunction() {
    // 这里是你要执行的业务逻辑
    print("someFunction被调用");
  }

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

使用时，在Widget4的上层初始化时传入someFunction：

Widget1(onTrigger: () => Widget4().someFunction())

注：如果Widget4是有状态组件，需要通过GlobalKey获取组件实例，或者在State类中持有someFunction的引用。

2. 使用Provider状态管理 #

如果Widget层级较深，回调传递太繁琐，可以用Provider的ChangeNotifier实现事件通知：

首先定义事件通知类：

import 'package:flutter/material.dart';

class EventNotifier extends ChangeNotifier {
  bool _isTriggered = false;

  bool get isTriggered => _isTriggered;

  void triggerEvent() {
    _isTriggered = true;
    notifyListeners(); // 通知所有监听者
    // 异步重置状态，确保下次触发能被正确检测
    Future.microtask(() => _isTriggered = false);
  }
}

在Widget树顶部注入这个Notifier：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => EventNotifier(),
      child: const MyApp(),
    ),
  );
}

修改Widget1，获取Notifier并触发事件：

class Widget1 extends StatelessWidget {
  const Widget1({super.key});

  void someEvent(BuildContext context) {
    if (true) { // 替换为你的条件判断
      Provider.of<EventNotifier>(context, listen: false).triggerEvent();
    }
  }

  @override
  Widget build(BuildContext context) {
    // 示例：通过按钮点击触发someEvent
    return ElevatedButton(
      onPressed: () => someEvent(context),
      child: Widget2(),
    );
  }
}

修改Widget4，监听状态变化并执行方法：

class Widget4 extends StatelessWidget {
  const Widget4({super.key});

  void someFunction() {
    print("someFunction被调用");
  }

  @override
  Widget build(BuildContext context) {
    // 监听事件触发状态
    final isTriggered = Provider.of<EventNotifier>(context).isTriggered;
    // 在帧绘制完成后执行方法，避免状态更新导致的重复调用
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (isTriggered) {
        someFunction();
      }
    });
    return Container();
  }
}

3. 事件总线（EventBus） #

采用发布订阅模式，Widget1发布事件，Widget4订阅事件，收到事件后执行方法。

首先在pubspec.yaml添加依赖：

dependencies:
  event_bus: ^2.0.0

创建全局事件总线和事件类：

final eventBus = EventBus();

// 定义触发事件的类
class TriggerEvent {}

Widget1中发布事件：

class Widget1 extends StatelessWidget {
  const Widget1({super.key});

  void someEvent() {
    if (true) { // 替换为你的条件判断
      eventBus.fire(TriggerEvent()); // 发布事件
    }
  }

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

Widget4中订阅事件，注意在生命周期中管理订阅：

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

  @override
  State<Widget4> createState() => _Widget4State();
}

class _Widget4State extends State<Widget4> {
  late StreamSubscription subscription;

  @override
  void initState() {
    super.initState();
    // 订阅TriggerEvent事件
    subscription = eventBus.on<TriggerEvent>().listen((event) {
      someFunction();
    });
  }

  void someFunction() {
    print("someFunction被调用");
  }

  @override
  void dispose() {
    subscription.cancel(); // 取消订阅，防止内存泄漏
    super.dispose();
  }

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

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