Flutter笔记：路由观察者

Flutter系列 路由观察者

作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263
邮箱：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/134572181

1. 概述

路由观察者（Route Observer）是一个监听路由（页面）变化的工具。在Flutter应用中，我们经常需要监听路由的变化，例如当用户从一个页面跳转到另一个页面时，我们可能需要执行一些操作，如数据统计、页面切换动画等，这时就需要用到路由观察者。

路由观察者的定义：路由观察者是一个抽象类，它定义了一些方法，这些方法可以在路由发生变化时被调用。我们可以通过继承路由观察者类并实现这些方法，来创建自己的路由观察者。

路由观察者的作用：路由观察者的主要作用是监听路由的变化，当路由发生变化时，路由观察者的相应方法会被调用，我们可以在这些方法中执行需要的操作。

路由观察者的使用场景：路由观察者可以用于各种需要监听路由变化的场景，例如数据统计、页面切换动画、用户行为跟踪等。

总的来说，路由观察者是Flutter中一个非常重要的工具，它可以帮助我们更好地理解和控制路由的变化。

2. 路由观察者的创建和使用

2.1 NavigatorObserver类的介绍

在Flutter中，路由观察者是通过继承NavigatorObserver类来创建的。NavigatorObserver是一个抽象类，它定义了一些方法，这些方法会在路由发生变化时被调用。例如，didPush方法会在新的路由被推送到导航器时被调用，didPop方法会在路由从导航器中弹出时被调用。

2.2 创建一个NavigatorObserver的子类

要创建一个路由观察者，我们需要创建一个NavigatorObserver 的子类，并实现它的方法。下面是一个简单的例子：

class MyRouteObserver extends NavigatorObserver {@overridevoid didPush(Route route, Route previousRoute) {super.didPush(route, previousRoute);print('didPush ${route.settings.name}');}@overridevoid didPop(Route route, Route previousRoute) {super.didPop(route, previousRoute);print('didPop ${route.settings.name}');}
}

在这个例子中，我们创建了一个名为 MyRouteObserver 的路由观察者，它会在路由被推送和弹出时打印路由的名称。

2.3 将路由观察者添加到MaterialApp或WidgetsApp

创建了路由观察者后，我们需要将它添加到 MaterialApp 或 WidgetsApp 中，这样它才能监听到路由的变化。这可以通过设置navigatorObservers 属性来实现：

void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {final MyRouteObserver _myRouteObserver = MyRouteObserver();@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',navigatorObservers: [_myRouteObserver],home: MyHomePage(),);}
}

在这个例子中，我们创建了一个 MyRouteObserver 的实例，并将它添加到了 MaterialApp 的navigatorObservers中。这样，MyRouteObserver 就能监听到所有路由的变化了。

3. 路由观察者的方法

路由观察者的方法主要包括 didPush，didPop，didRemove 和 didReplace 等。下面我们来详细介绍这些方法。

3.1 didPush

didPush 方法会在新的路由被推送到导航器时被调用。它有两个参数：route 和 previousRoute，分别表示新推送的路由和之前的路由。

使用场景：当我们需要在新的路由被推送时执行一些操作时，可以在didPush方法中实现。

3.2 didPop

didPop 方法会在路由从导航器中弹出时被调用。它的参数和 didPush 方法相同。

使用场景：当我们需要在路由被弹出时执行一些操作时，可以在didPop方法中实现。

3.3 didRemove

didRemove 方法会在路由被从导航器中移除时被调用。它有两个参数：route 和 previousRoute ，分别表示被移除的路由和之前的路由。

使用场景：当我们需要在路由被移除时执行一些操作时，可以在didRemove方法中实现。

3.4 didReplace

didReplace 方法会在一个路由被另一个路由替换时被调用。它有两个参数：newRoute 和 oldRoute，分别表示新的路由和被替换的路由。

使用场景：当我们需要在路由被替换时执行一些操作时，可以在didReplace方法中实现。

下面是一个使用这些方法的例子：
在这个例子中，我们在每个方法中都打印了相关的信息，这样我们就可以清楚地看到路由的变化。

class MyRouteObserver extends NavigatorObserver {@overridevoid didPush(Route route, Route previousRoute) {super.didPush(route, previousRoute);print('didPush ${route.settings.name}');}@overridevoid didPop(Route route, Route previousRoute) {super.didPop(route, previousRoute);print('didPop ${route.settings.name}');}@overridevoid didRemove(Route route, Route previousRoute) {super.didRemove(route, previousRoute);print('didRemove ${route.settings.name}');}@overridevoid didReplace({Route newRoute, Route oldRoute}) {super.didReplace(newRoute: newRoute, oldRoute: oldRoute);print('didReplace ${oldRoute.settings.name} with ${newRoute.settings.name}');}
}

下面是一个使用路由观察者来实现用户行为跟踪的例子：

class MyRouteObserver extends NavigatorObserver {@overridevoid didPush(Route route, Route previousRoute) {super.didPush(route, previousRoute);print('User opened ${route.settings.name}');// 这里我们可以启动一个计时器来跟踪用户在这个页面上停留的时间。}@overridevoid didPop(Route route, Route previousRoute) {super.didPop(route, previousRoute);print('User closed ${route.settings.name}');// 在这里，我们可以停止计时器，并获得用户在此页面停留的时间。}
}

在这个例子中，我们在 didPush 和 didPop 方法中分别打印了用户打开和关闭页面的信息，并且提到了如何使用计时器来跟踪用户在每个页面的停留时间。

5. 路由观察者的限制和注意事项

虽然路由观察者是一个非常强大的工具，但在使用过程中也有一些限制和需要注意的事项。

5.1 限制

仅仅监听 Navigator 进行的路由变化

路由观察者只能监听到通过 Navigator 进行的路由变化，如果路由变化是通过其他方式（例如直接修改组件的状态）进行的，那么路由观察者是无法监听到的。

PopScope

路由观察者的方法是在路由变化后被调用的，因此它不能阻止路由的变化。如果你需要在路由变化前进行一些操作（例如询问用户是否确定要离开当前页面），那么你需要使用其他的方法，例如 PopScope（ WillPopScope 已经被废弃，使用PopScope替代）。
关于 PopScope 这里补充一个案例分析：

import 'package:flutter/material.dart';void main() => runApp(const NavigatorPopHandlerApp());class NavigatorPopHandlerApp extends StatelessWidget {const NavigatorPopHandlerApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(// 设置初始路由为 '/home'initialRoute: '/home',// 定义路由表routes: <String, WidgetBuilder>{'/home': (BuildContext context) => const _HomePage(),'/two': (BuildContext context) => const _PageTwo(),},);}
}

class _HomePage extends StatefulWidget {const _HomePage();@overrideState<_HomePage> createState() => _HomePageState();
}// 首页的状态组件
class _HomePageState extends State<_HomePage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('Page One'), // 显示 "Page One" 文字TextButton(onPressed: () {Navigator.of(context).pushNamed('/two'); // 点击按钮后跳转到第二个页面},child: const Text('Next page'), // 显示 "Next page" 文字),],),),);}
}

// 第二个页面的组件
class _PageTwo extends StatefulWidget {const _PageTwo();@overrideState<_PageTwo> createState() => _PageTwoState();
}// 第二个页面的状态组件
class _PageTwoState extends State<_PageTwo> {// 显示一个对话框，询问用户是否确定离开void _showBackDialog() {showDialog<void>(context: context,builder: (BuildContext context) {return AlertDialog(title: const Text('Are you sure?'), // 对话框标题content: const Text('Are you sure you want to leave this page?', // 对话框内容),actions: <Widget>[TextButton(style: TextButton.styleFrom(textStyle: Theme.of(context).textTheme.labelLarge,),child: const Text('Nevermind'), // "Nevermind" 按钮onPressed: () {Navigator.pop(context); // 点击后关闭对话框},),TextButton(style: TextButton.styleFrom(textStyle: Theme.of(context).textTheme.labelLarge,),child: const Text('Leave'), // "Leave" 按钮onPressed: () {Navigator.pop(context); // 点击后关闭对话框Navigator.pop(context); // 并返回上一个页面},),],);},);}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('Page Two'), // 显示 "Page Two" 文字PopScope(canPop: false,onPopInvoked: (bool didPop) {if (didPop) {return;}_showBackDialog(); // 当用户尝试离开时，显示对话框},child: TextButton(onPressed: () {_showBackDialog(); // 点击按钮后显示对话框},child: const Text('Go back'), // 显示 "Go back" 文字),),],),),);}
}