Flutter Modal over Modal 点击按钮弹出第二层模态框实现问询

实现原理 #

Flutter 中所有系统提供的模态框（showDialog、showModalBottomSheet、showCupertinoModalPopup等）本质都是向全局Navigator路由栈中新增了一个路由，天然支持多层路由叠加，只需在已打开的模态框内触发新的模态框调用即可实现需求。

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Modal over Modal Demo")),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _showFirstModal(context),
            child: const Text("打开第一个模态框"),
          ),
        ),
      ),
    );
  }

  // 弹出第一个模态框
  void _showFirstModal(BuildContext parentContext) {
    showDialog(
      context: parentContext,
      builder: (BuildContext firstModalContext) {
        return AlertDialog(
          title: const Text("第一个模态框"),
          content: const Text("点击下方按钮弹出第二个模态框"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(firstModalContext),
              child: const Text("关闭"),
            ),
            ElevatedButton(
              onPressed: () => _showSecondModal(firstModalContext),
              child: const Text("打开第二个模态框"),
            )
          ],
        );
      },
    );
  }

  // 弹出第二个模态框
  void _showSecondModal(BuildContext firstModalContext) {
    showDialog(
      context: firstModalContext,
      barrierDismissible: false, // 配置点击遮罩不关闭当前模态框
      builder: (BuildContext secondModalContext) {
        return AlertDialog(
          title: const Text("第二个模态框"),
          content: const Text("这是叠加在第一层之上的模态框"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(secondModalContext),
              child: const Text("关闭当前模态框"),
            ),
            TextButton(
              onPressed: () {
                // 同时关闭两层模态框
                Navigator.pop(secondModalContext);
                Navigator.pop(firstModalContext);
              },
              child: const Text("关闭全部模态框"),
            )
          ],
        );
      },
    );
  }
}

注意事项 #

• 调用第二层模态框时，需传入第一层模态框内部的BuildContext，避免上下文层级错误导致弹窗无法正常叠加
• 可单独为每一层模态框配置barrierDismissible参数，控制点击遮罩区域是否可关闭当前层
• 关闭模态框时使用对应层级的上下文调用Navigator.pop()，即可精准关闭指定层级，无需额外维护弹窗状态
• 如果使用自定义模态框实现，确保路由调用逻辑走系统Navigator栈即可适配多层叠加逻辑

内容的提问来源于stack exchange，提问作者хэлоу