如何防止Flutter导航跳转后Dialog与showModalBottomSheet弹窗弹出

if(mounted)判断失效的核心原因：页面执行push跳转后，原页面Widget不会立刻被销毁，新页面覆盖在原页面上方的阶段，原页面对应的mounted值依然为true，无法识别当前页面已经被覆盖、不在栈顶的状态，自然拦不住弹窗弹出。

方案1：弹窗前增加路由栈顶校验（改造成本最低，优先推荐） #

在执行showDialog/showModalBottomSheet前，除了判断mounted，额外校验当前页面对应的路由是否处于栈顶位置，校验不通过直接终止弹窗逻辑。

// 异步逻辑（接口请求、延时操作等）执行完成后，先做两层校验
if (!mounted) return;
final currentRoute = ModalRoute.of(context);
// 路由不存在 或 当前路由已经不是栈顶路由（已跳转到其他页面），直接终止弹窗逻辑
if (currentRoute == null || !currentRoute.isCurrent) return;

// 校验通过后再调用弹窗组件
showDialog(
  context: context,
  builder: (context) => const AlertDialog(
    title: Text('提示'),
    content: Text('弹窗内容'),
  ),
);

// 调用showModalBottomSheet的逻辑完全一致，替换为对应组件方法即可

方案2：维护页面激活状态标记（适合复杂异步场景） #

在页面State内维护独立的页面激活标记，监听路由生命周期：页面被其他页面覆盖时标记为未激活，回到当前页面时恢复激活状态，弹窗前同时校验mounted和激活标记即可。

// 首先在页面State中混入RouteAware，监听路由变化
class _YourPageState extends State<YourPage> with RouteAware {
  bool _isPageActive = true;

  @override
  void didPushNext() {
    // 当前页面被新页面覆盖，标记为未激活
    _isPageActive = false;
    super.didPushNext();
  }

  @override
  void didPopNext() {
    // 回到当前页面，恢复激活状态
    _isPageActive = true;
    super.didPopNext();
  }

  // 弹窗触发逻辑示例
  void _triggerBottomSheet() async {
    // 模拟耗时异步任务
    await Future.delayed(const Duration(seconds: 3));
    // 双重校验拦截
    if (!mounted || !_isPageActive) return;
    showModalBottomSheet(
      context: context,
      builder: (context) => const SizedBox(
        height: 200,
        child: Center(child: Text('底部弹窗内容')),
      ),
    );
  }
}

注意：使用RouteAware需要提前在MaterialApp中注册全局RouteObserver，否则路由生命周期回调不会正常触发。

方案3：跳转前统一拦截（兜底方案） #

如果项目中弹窗触发逻辑分散、不好逐个改造，可以在所有执行页面跳转的逻辑前统一做处理：

• 先判断当前是否有已弹出的弹窗，存在的话先调用Navigator.pop(context)关闭
• 对异步触发的弹窗任务封装可取消对象（比如CancelableOperation），页面跳转时直接取消所有待执行的弹窗任务，从根源阻止弹窗方法被调用

• 禁止使用全局BuildContext调用弹窗方法，必须传入当前页面对应的context，否则路由校验会完全失效
• 所有依赖异步回调触发的弹窗，不能仅依赖mounted做判断，必须配合路由状态校验，才能完全避免页面跳转后弹窗异常弹出的问题

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