Flutter中如何判断路由是否为最顶层（含弹出过渡阶段）

当路由执行弹出过渡动画时，ModalRoute.of(context).isCurrent会提前指向即将激活的下层路由，无法满足你需要的"始终取视觉最顶层路由"的需求。这里提供一个可靠的解决方案：

核心思路 #

利用Navigator的visibleRoutes属性，它包含所有当前视觉可见的路由（包括正在执行进出过渡动画的路由），列表的最后一个元素就是视觉层级最高的路由——也就是你要找的"最顶层"路由，无论它是正在被推入还是弹出。

代码实现 #

判断当前路由是否为视觉最顶层 #

bool isTopMostRoute(BuildContext context) {
  final currentRoute = ModalRoute.of(context);
  final topVisibleRoute = Navigator.of(context).visibleRoutes.last;
  return currentRoute == topVisibleRoute;
}

获取最顶层路由的过渡配置 #

结合你的自定义PageRouteBuilder场景，可以这样获取最顶层路由的过渡设置：

// 自定义路由类，包含过渡配置
class CustomPageRoute extends PageRouteBuilder {
  final TransitionSettings transitionSettings;

  CustomPageRoute({
    required this.transitionSettings,
    required WidgetBuilder builder,
  }) : super(pageBuilder: (context, animation, secondaryAnimation) => builder(context));
}

// 过渡配置类
class TransitionSettings {
  final Duration duration;
  final Curve curve;

  TransitionSettings({required this.duration, required this.curve});

  static TransitionSettings get defaultSettings => TransitionSettings(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
}

// 获取最顶层路由的过渡配置
TransitionSettings getTopRouteTransition(BuildContext context) {
  final topRoute = Navigator.of(context).visibleRoutes.last;
  if (topRoute is CustomPageRoute) {
    return topRoute.transitionSettings;
  }
  return TransitionSettings.defaultSettings;
}

原理说明 #

• isCurrent标识的是导航栈中当前可交互的激活路由，当弹出动画开始时，Flutter会提前将下层路由设为激活状态，所以这个属性无法反映视觉层级。
• visibleRoutes则是基于视觉渲染层级维护的列表，所有正在过渡的路由都会被包含在内，最后一个元素始终是屏幕上最上层的路由，完美匹配你的需求——无论过渡动画是否完成，都能取到视觉最顶层路由的配置。

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