Flutter路由激活/失活时是否有可订阅的事件？

这是Flutter官方提供的页面路由生命周期监听方案，专门用来处理页面显示/隐藏时的操作，完全替代手动在导航回调里写逻辑的繁琐方式。

步骤1：全局注册RouteObserver #

在你的MaterialApp（或CupertinoApp）中添加RouteObserver到导航观察者列表：

final RouteObserver<ModalRoute<void>> routeObserver = RouteObserver<ModalRoute<void>>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver], // 注册路由观察者
      home: HomePage(),
    );
  }
}

步骤2：页面中混入RouteAware并监听生命周期 #

在需要监听的页面State类中，混入RouteAware，并在initState和dispose中完成订阅/取消订阅，重写对应的生命周期方法：

class MyPageState extends State<MyPage> with RouteAware {
  @override
  void initState() {
    super.initState();
    // 页面渲染完成后订阅路由监听
    WidgetsBinding.instance.addPostFrameCallback((_) {
      routeObserver.subscribe(this, ModalRoute.of(context)!);
    });
  }

  @override
  void dispose() {
    // 页面销毁时取消订阅
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  // 页面首次被推入导航栈时调用（第一次显示）
  @override
  void didPush() {
    super.didPush();
    subscribeUpdates(); // 执行订阅操作，比如监听数据更新
  }

  // 从子页面返回当前页面时调用（页面重新激活）
  @override
  void didPopNext() {
    super.didPopNext();
    subscribeUpdates(); // 重新订阅
  }

  // 当前页面被弹出导航栈时调用（返回上一页）
  @override
  void didPop() {
    super.didPop();
    unsubscribeUpdates(); // 取消订阅
  }

  // 当前页面被新页面覆盖时调用（跳转到子页面）
  @override
  void didPushNext() {
    super.didPushNext();
    unsubscribeUpdates(); // 取消订阅
  }

  // 自定义订阅逻辑
  void subscribeUpdates() {
    // 这里写你的订阅代码，比如Stream监听、Bloc状态订阅等
  }

  // 自定义取消订阅逻辑
  void unsubscribeUpdates() {
    // 这里写取消订阅的代码，比如关闭Stream、取消Bloc监听等
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(/* 页面内容 */);
  }
}

补充：结合App生命周期监听 #

如果需要处理App整体前后台切换的场景（比如用户按Home键退到后台再返回），可以再混入WidgetsBindingObserver：

class MyPageState extends State<MyPage> with RouteAware, WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 保留RouteObserver的订阅逻辑
    WidgetsBinding.instance.addPostFrameCallback((_) {
      routeObserver.subscribe(this, ModalRoute.of(context)!);
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // App回到前台且当前页面是顶层页面时，重新订阅
    if (state == AppLifecycleState.resumed && ModalRoute.of(context)?.isCurrent == true) {
      subscribeUpdates();
    } 
    // App退到后台时，取消订阅
    else if (state == AppLifecycleState.paused) {
      unsubscribeUpdates();
    }
  }

  // 保留RouteAware的其他方法...
}

• 繁琐：每个导航操作都要重复写suspend()和resume()，容易遗漏，维护成本高
• 不全面：无法处理系统级的页面切换（比如App被后台杀死再恢复、多任务切换回到App），而RouteAware能覆盖所有页面路由相关的场景

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