Flutter如何监听导航事件并在跳转时通知对应子组件？

这个需求完全可以实现，以下是三种常用的实现方案，你可以根据业务场景选择：

方法1：结合局部状态直接关联导航动作 #

Navigator的所有路由操作（push/pop/replace等）执行时机完全可控，你可以在触发导航的同时，通过局部状态通知子组件执行对应逻辑：

1. 在Widget A中定义可监听的状态变量，比如ValueNotifier：

// Widget A的State类内定义
final ValueNotifier<bool> isTriggerChatNavigation = ValueNotifier(false);

// 触发导航的方法
void openChatPage() {
  // 先更新状态通知子组件
  isTriggerChatNavigation.value = true;
  // 执行导航逻辑
  Navigator.of(context).pushNamed('/chat');
  // 如果需要监听聊天页面关闭后的回调，可以追加then逻辑
  // Navigator.of(context).pushNamed('/chat').then((returnValue) {
  //   isTriggerChatNavigation.value = false;
  // });
}

2. 在子组件中监听状态变化触发事件：

// 子组件build方法内使用ValueListenableBuilder监听状态
ValueListenableBuilder<bool>(
  valueListenable: isTriggerChatNavigation,
  builder: (context, hasNavigated, child) {
    if (hasNavigated) {
      // 放入帧回调避免build过程中执行side effect
      WidgetsBinding.instance.addPostFrameCallback((_) {
        // 这里写你需要触发的子组件事件逻辑
      });
    }
    // 返回子组件原有布局
    return const YourChildWidget();
  },
)

方法2：通过NavigatorObserver全局监听路由变化 #

如果需要跨组件通用监听所有导航动作，可以自定义导航观察者：

1. 自定义NavigatorObserver子类：

class CustomNavigatorObserver extends NavigatorObserver {
  // 路由push完成时触发
  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    if (route.settings.name == '/chat') {
      // 这里可以通过全局事件总线、全局状态管理等方式发送导航事件
      GlobalEventBus.instance.fire(ChatPagePushedEvent());
    }
  }
  // 按需重写其他生命周期方法：didPop/didReplace/didRemove等
}

2. 把自定义观察者注册到MaterialApp中：

MaterialApp(
  navigatorObservers: [CustomNavigatorObserver()],
  // 其他原有配置
);

3. 在Widget A的子组件中监听对应的全局事件，收到通知后执行逻辑即可。

方法3：使用路由框架自带的监听能力 #

如果项目使用了GetX、go_router等成熟路由框架，可以直接使用框架自带的路由监听API：

• go_router可以通过redirect回调、refreshListenable参数监听路由跳转
• GetX可以通过routingCallback配置全局路由监听钩子

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