Flutter 利用路由监听页面的展示与否

不掰手腕2023-12-29 11:39

这里写自定义目录标题

1、新建routeMonitor.dart文件：
2、修改main.dart：
3.监听页面显隐的页面

1、新建routeMonitor.dart文件：

dart 复制代码

import 'package:flutter/material.dart';

class AppRouteObserver {
  //这是实际上的路由监听器
  static final RouteObserver<ModalRoute<void>> _routeObserver =
      RouteObserver<ModalRoute<void>>();
  //这是个单例
  static final AppRouteObserver _appRouteObserver =
      AppRouteObserver._internal();

  AppRouteObserver._internal();
  //通过单例的get方法轻松获取路由监听器
  RouteObserver<ModalRoute<void>> get routeObserver {
    return _routeObserver;
  }

  factory AppRouteObserver() {
    return _appRouteObserver;
  }
}

2、修改main.dart：

dart 复制代码

MaterialApp(
      navigatorObservers: [AppRouteObserver().routeObserver],
);

3.监听页面显隐的页面

dart 复制代码

class _XXX extends State<XXX> with RouteAware {
...
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();

    /// 路由订阅
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    /// 取消路由订阅
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    print('跳转该页面而显示');
  }

  @override
  void didPop() {
    print('当前页面被pop而隐藏');
  }

  @override
  void didPopNext() {
    print('上一个页面关闭而显示');
  }

  @override
  void didPushNext() {
    print('跳转下一个页面而隐藏');
  }
  ...
}