Flutter中调用新AlertDialog时关闭原有弹窗的实现方法

嘿，这个问题我开发时也碰到过，说白了就是打开新弹窗前没把旧的关掉，导致两个弹窗都留在导航栈里同时显示。下面给你两种简单靠谱的解决思路：

方法一：先关闭当前弹窗，再打开新弹窗 #

AlertDialog是通过showDialog加入导航栈的，所以我们只需要在调用新的showDialog前，用Navigator.pop(context)把当前弹窗从栈中移除即可。

示例代码 #

原来会导致叠加的代码：

AlertDialog(
  title: const Text("初始弹窗"),
  actions: [
    TextButton(
      onPressed: () {
        // 直接打开新弹窗，导致叠加
        showDialog(
          context: context,
          builder: (context) => AlertDialog(title: const Text("新弹窗")),
        );
      },
      child: const Text("打开新弹窗"),
    )
  ],
)

修改后解决叠加问题的代码：

AlertDialog(
  title: const Text("初始弹窗"),
  actions: [
    TextButton(
      onPressed: () {
        // 第一步：关闭当前弹窗
        Navigator.pop(context);
        // 第二步：打开新弹窗
        showDialog(
          context: context,
          builder: (context) => AlertDialog(title: const Text("新弹窗")),
        );
      },
      child: const Text("打开新弹窗"),
    )
  ],
)

方法二：使用Navigator.pushReplacement替代（进阶场景） #

如果你的弹窗逻辑需要更灵活的路由管理，比如想把旧弹窗直接替换成新的，可以用Navigator.pushReplacement来实现。不过这种方法需要把弹窗包装成DialogRoute，适合复杂场景：

AlertDialog(
  title: const Text("初始弹窗"),
  actions: [
    TextButton(
      onPressed: () {
        Navigator.pushReplacement(
          context,
          DialogRoute(
            context: context,
            builder: (context) => AlertDialog(title: const Text("新弹窗")),
          ),
        );
      },
      child: const Text("打开新弹窗"),
    )
  ],
)

关键点说明 #

• Flutter的showDialog本质是往导航栈中添加了一个新的路由，直接调用新的showDialog会让两个路由（弹窗）同时存在，导致叠加。
• 用Navigator.pop(context)会移除当前栈顶的弹窗路由，之后再打开新弹窗就只会有一个弹窗显示了。
• 如果你的弹窗是使用rootNavigator: true显示的，记得用Navigator.of(context, rootNavigator: true).pop()来关闭，确保能正确找到对应的导航栈。

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