Flutter如何监听路由变化

在Flutter中如何监听路由变化？比如当用户跳转到新页面或返回上一页时，能否触发回调函数？我想在路由变化时执行一些操作，例如统计页面访问或动态更新UI，但不知道具体该怎样实现。NavigationObserver和RouteAware这两个类应该如何使用？有没有简单的代码示例可以参考？

2 回复

在Flutter中监听路由变化，可以使用NavigatorObserver。创建自定义观察者类继承NavigatorObserver，重写didPush和didPop方法。然后在MaterialApp的navigatorObservers属性中注册即可监听页面跳转。

更多关于Flutter如何监听路由变化的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，监听路由变化可以通过以下方式实现：

1. 使用 Navigator 的观察者（推荐）

class RouteObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    print('路由入栈: ${route.settings.name}');
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    print('路由出栈: ${route.settings.name}');
  }

  @override
  void didReplace({Route? newRoute, Route? oldRoute}) {
    print('路由替换: ${oldRoute?.settings.name} -> ${newRoute?.settings.name}');
  }

  @override
  void didRemove(Route route, Route? previousRoute) {
    print('路由移除: ${route.settings.name}');
  }
}

2. 在 MaterialApp 中注册观察者

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver],
      home: HomePage(),
    );
  }
}

3. 在具体页面中监听

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with RouteAware {
  final RouteObserver<PageRoute> routeObserver;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
  }

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

  @override
  void didPush() {
    print('页面进入前台');
  }

  @override
  void didPopNext() {
    print('其他页面返回，本页面进入前台');
  }

  @override
  void didPushNext() {
    print('本页面跳转到其他页面');
  }

  @override
  void didPop() {
    print('本页面返回');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('路由监听')),
      body: Center(child: Text('监听路由变化')),
    );
  }
}

主要监听方法说明：

  • didPush: 路由入栈时触发
  • didPop: 路由出栈时触发
  • didReplace: 路由替换时触发
  • didRemove: 路由被移除时触发

这种方式可以精确监听每个页面的路由状态变化，适用于需要根据路由变化执行特定逻辑的场景。

回到顶部