Flutter笔记：路由观察者-阿里云开发者社区

Flutter系列路由观察者

1. 概述

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

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

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

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

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

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

2.1 NavigatorObserver类的介绍

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

2.2 创建一个NavigatorObserver的子类

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

class MyRouteObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);
    print('didPush ${route.settings.name}');
  }
  @override
  void 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();
  @override
  Widget 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 {
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);
    print('didPush ${route.settings.name}');
  }
  @override
  void didPop(Route route, Route previousRoute) {
    super.didPop(route, previousRoute);
    print('didPop ${route.settings.name}');
  }
  @override
  void didRemove(Route route, Route previousRoute) {
    super.didRemove(route, previousRoute);
    print('didRemove ${route.settings.name}');
  }
  @override
  void didReplace({Route newRoute, Route oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    print('didReplace ${oldRoute.settings.name} with ${newRoute.settings.name}');
  }
}

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

class MyRouteObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);
    print('User opened ${route.settings.name}');
    // 这里我们可以启动一个计时器来跟踪用户在这个页面上停留的时间。
  }
  @override
  void 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});
  @override
  Widget 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();
  @override
  State<_HomePage> createState() => _HomePageState();
}
// 首页的状态组件
class _HomePageState extends State<_HomePage> {
  @override
  Widget 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();
  @override
  State<_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); // 并返回上一个页面
              },
            ),
          ],
        );
      },
    );
  }
  @override
  Widget 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" 文字
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这段代码是Flutter官方给出的一个案例，它包含两个页面，用户可以在这两个页面之间导航。当用户尝试离开第二个页面时，会弹出一个对话框询问用户是否确定离开。

5.2 注意事项

在使用路由观察者时，需要注意不要在路由观察者的方法中进行过于复杂的操作，因为这可能会影响到路由的性能。如果需要进行复杂的操作，建议在另一个异步任务中进行。
在使用路由观察者时，需要注意正确地管理路由观察者的生命周期。如果一个路由观察者被销毁了，但是你仍然试图在它的方法中访问一些资源，那么可能会导致错误。
在使用路由观察者时，需要注意处理好异常。因为路由观察者的方法是在路由变化后被调用的，如果在这些方法中发生了异常，那么可能会导致应用崩溃。

Flutter笔记：路由观察者

1. 概述

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

2.1 NavigatorObserver类的介绍

2.2 创建一个NavigatorObserver的子类

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

3. 路由观察者的方法

3.1 didPush

3.2 didPop

3.3 didRemove

3.4 didReplace

4. 路由观察者的应用

4.1 用户行为跟踪

4.2 页面切换动画

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

5.1 限制

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

PopScope

5.2 注意事项

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Flutter笔记：路由观察者

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

PopScope

热门文章

最新文章

相关电子书