Flutter路由监听插件route_observer_mixin的使用

RouteObserveMixin 提供了对 didPush、didPop、didPushNext 和 didPopNext 的简单访问，允许开发者在页面导航时执行特定逻辑。以下是具体用法：

使用方法

1. 包裹MaterialApp与RouteObserverProvider

首先，你需要将你的 MaterialApp 包裹在一个 RouteObserverProvider 中。这可以通过 MultiProvider 来实现，或者直接使用 RouteObserverProvider。

void main() {
  runApp(
    MultiProvider(
      providers: [
        // 1. Wrap MaterialApp with RouteObserverProvider.
        RouteObserverProvider(),
        ChangeNotifierProvider(create: (context) => Logger())
      ],
      child: const App(),
    ),
  );

  // Of course, this is also ok.
  // I demonstrated that [MultiProvider] can be used for RouteObserverProvider👍

  /*
  runApp(
    RouteObserverProvider(
      child: App(),
    ),
  );
  */
}

2. 将RouteObserverProvider.of(context)传递给navigatorObservers

接下来，需要将 RouteObserverProvider.of(context) 传递给 MaterialApp 的 navigatorObservers 属性中。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 2. Pass RouteObserverProvider.of(context) to navigatorObservers.
      navigatorObservers: [RouteObserverProvider.of(context)],
      home: const APage(),
    );
  }
}

3. 在State中添加RouteAware和RouteObserverMixin并覆盖RouteAware方法

最后，在你想要监听路由变化的页面的 State 类中添加 with RouteAware, RouteObserverMixin 并覆盖 RouteAware 方法。

class APage extends StatefulWidget {
  const APage({Key key}) : super(key: key);

  @override
  _APageState createState() => _APageState();
}

// 3. Add `with RouteAware, RouteObserverMixin` to State and override RouteAware methods.
class _APageState extends State<APage> with RouteAware, RouteObserverMixin {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('A Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push<void>(
              MaterialPageRoute(
                builder: (context) => const BPage(),
              ),
            );
          },
          child: const Text('B Page'),
        ),
      ),
    );
  }

  /// Called when the top route has been popped off, and the current route shows up.
  @override
  void didPopNext() { 
    print("Did Pop Next");
  }

  /// Called when the current route has been pushed.
  @override
  void didPush() { 
    print("Did Push");
  }

  /// Called when the current route has been popped off.
  @override
  void didPop() { 
    print("Did Pop");
  }

  /// Called when a new route has been pushed, and the current route is no longer visible.
  @override
  void didPushNext() { 
    print("Did Push Next");
  }
}

示例代码

以下是一个完整的示例demo，展示了如何使用 route_observer_mixin 插件进行路由监听：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:route_observer_mixin/route_observer_mixin.dart';

import 'log_view.dart';
import 'pages/pages.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        // 1. Wrap MaterialApp with RouteObserverProvider.
        RouteObserverProvider(
          create: (context) => GlobalRouteObserver()..navigation.listen(print),
        ),
        ChangeNotifierProvider(create: (context) => Logger())
      ],
      child: const App(),
    ),
  );

  // Of course, this is also ok.
  // I demonstrated that [MultiProvider] can be used for RouteObserverProvider👍

  /*
  runApp(
    RouteObserverProvider(
      child: const App(),
    ),
  );
  */
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: MaterialApp(
            // 2. Pass RouteObserverProvider.of(context) to navigatorObservers.
            navigatorObservers: [RouteObserverProvider.of(context)],
            home: const APage(),
          ),
        ),
        const SizedBox(
          height: 300,
          child: LogView(),
        ),
      ],
    );
  }
}

通过以上步骤，你可以轻松地在Flutter应用中使用 route_observer_mixin 插件来监听路由变化，并根据需要执行相应的操作。