Flutter如何获取导航栈顶层View名称及判断指定View是否显示

前置配置：自定义路由监听器 #

Flutter官方的Navigator类没有直接暴露路由栈查询接口，我们可以通过自定义NavigatorObserver监听路由栈变化，自行维护路由栈列表实现需求：

class CustomNavigatorObserver extends NavigatorObserver {
  // 维护全局路由栈
  static final List<Route<dynamic>> _routeStack = [];

  // 获取路由栈顶层路由名称
  static String? getTopRouteName() {
    if (_routeStack.isEmpty) return null;
    return _routeStack.last.settings.name;
  }

  // 判断指定路由是否处于顶层显示状态
  static bool isRouteVisible(String targetRouteName) {
    if (_routeStack.isEmpty) return false;
    return _routeStack.last.settings.name == targetRouteName;
  }

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    _routeStack.add(route);
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    _routeStack.remove(route);
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (oldRoute != null && newRoute != null) {
      int index = _routeStack.indexOf(oldRoute);
      if (index != -1) _routeStack[index] = newRoute;
    }
  }

  @override
  void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didRemove(route, previousRoute);
    _routeStack.remove(route);
  }
}

将自定义监听器注册到MaterialApp中：

MaterialApp(
  // 注册路由监听器
  navigatorObservers: [CustomNavigatorObserver()],
  // 路由配置必须携带settings.name
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/home':
        // 必须传入settings参数，否则路由名称不会被识别
        return MaterialPageRoute(builder: (_) => const HomePage(), settings: settings);
      case '/detail':
        return MaterialPageRoute(builder: (_) => const DetailPage(), settings: settings);
      default:
        return MaterialPageRoute(builder: (_) => const UnknownPage(), settings: settings);
    }
  },
  // 其他配置项...
)

1. 获取导航栈顶层View的名称 #

直接调用封装好的静态方法即可获取当前显示页面的路由名：

String? currentPageName = CustomNavigatorObserver.getTopRouteName();

2. 判断指定View是否处于显示状态 #

传入目标路由名称即可校验对应页面是否正在显示：

// 校验/home路由是否正在显示
bool homeIsShowing = CustomNavigatorObserver.isRouteVisible('/home');

补充：如果仅需要在当前页面内部判断自己是否处于顶层显示，不需要全局能力，可以直接用以下代码，无需自定义监听器：

// 写在当前页面的State类中
bool currentIsTop = ModalRoute.of(context)?.isCurrent ?? false;

注意：所有路由跳转必须配置settings.name属性，使用Navigator.pushNamed命名路由跳转时会自动携带该参数，无需额外处理。

内容的提问来源于stack exchange，提问作者Sulaiman Khan