Flutter中点击TextButton弹窗及多级嵌套弹窗实现问询

有两种常用的灵活实现方案：

方案1：使用Overlay组件（精准定位弹窗） #

Overlay可以在当前页面之上插入独立Widget，适合在指定位置弹出内容。核心是通过GlobalKey获取TextButton的位置，再在Overlay中添加目标Widget：

class PopupDemo extends StatefulWidget {
  const PopupDemo({super.key});

  @override
  State<PopupDemo> createState() => _PopupDemoState();
}

class _PopupDemoState extends State<PopupDemo> {
  final GlobalKey _buttonKey = GlobalKey();
  OverlayEntry? _overlayEntry;

  void _showPopup() {
    final renderBox = _buttonKey.currentContext?.findRenderObject() as RenderBox;
    final position = renderBox.localToGlobal(Offset.zero);
    final size = renderBox.size;

    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        left: position.dx,
        top: position.dy + size.height,
        child: Material(
          elevation: 4,
          child: Container(
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: const Text('弹出的Widget内容'),
          ),
        ),
      ),
    );

    Overlay.of(context).insert(_overlayEntry!);
  }

  void _hidePopup() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  @override
  void dispose() {
    _hidePopup();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          key: _buttonKey,
          onPressed: () {
            _overlayEntry == null ? _showPopup() : _hidePopup();
          },
          child: const Text('点击弹出Widget'),
        ),
      ),
    );
  }
}

方案2：使用showModalBottomSheet（底部弹窗） #

如果只需要从底部弹出内容，这个方法更简单，无需手动处理位置：

TextButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 200,
        child: const Center(child: Text('底部弹出的Widget')),
      ),
    );
  },
  child: const Text('点击弹出底部Widget'),
)

这个需求需要处理多层弹窗的显示/隐藏，以及外部点击关闭逻辑，这里用Overlay实现，能灵活控制弹窗的层级和位置：

class ComplexPopupDemo extends StatefulWidget {
  const ComplexPopupDemo({super.key});

  @override
  State<ComplexPopupDemo> createState() => _ComplexPopupDemoState();
}

class _ComplexPopupDemoState extends State<ComplexPopupDemo> {
  final GlobalKey _mainButtonKey = GlobalKey();
  final GlobalKey _greenContainerKey = GlobalKey();
  final GlobalKey _iconKey = GlobalKey();
  OverlayEntry? _widgetW;
  OverlayEntry? _widgetX;
  OverlayEntry? _widgetY;

  // 关闭所有弹窗
  void _closeAllPopups() {
    _widgetW?.remove();
    _widgetX?.remove();
    _widgetY?.remove();
    _widgetW = null;
    _widgetX = null;
    _widgetY = null;
  }

  // 获取组件的位置和尺寸
  (Offset, Size) _getWidgetInfo(GlobalKey key) {
    final renderBox = key.currentContext?.findRenderObject() as RenderBox;
    final position = renderBox.localToGlobal(Offset.zero);
    final size = renderBox.size;
    return (position, size);
  }

  // 显示Widget W
  void _showWidgetW() {
    final (position, size) = _getWidgetInfo(_mainButtonKey);
    _widgetW = OverlayEntry(
      builder: (context) => GestureDetector(
        onTap: _closeAllPopups,
        behavior: HitTestBehavior.translucent,
        child: Stack(
          children: [
            Positioned(
              left: position.dx,
              top: position.dy + size.height,
              child: GestureDetector(
                onTap: () {},
                child: Material(
                  elevation: 4,
                  child: Container(
                    width: 200,
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    color: Colors.white,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        // TextButton T
                        TextButton(
                          onPressed: () => print('点击了TextButton T'),
                          child: const Text('TextButton T'),
                        ),
                        // PopupMenuButton
                        const PopupMenuButton(
                          itemBuilder: (context) => [
                            PopupMenuItem(child: Text('选项1')),
                            PopupMenuItem(child: Text('选项2')),
                          ],
                          child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 16),
                            child: Text('PopupMenu'),
                          ),
                        ),
                        // 绿色Container
                        GestureDetector(
                          key: _greenContainerKey,
                          onTap: _showWidgetX,
                          child: Container(
                            width: double.infinity,
                            height: 40,
                            color: Colors.green,
                            alignment: Alignment.center,
                            child: const Text('绿色Container', style: TextStyle(color: Colors.white)),
                          ),
                        ),
                        // 图标按钮
                        IconButton(
                          key: _iconKey,
                          onPressed: _showWidgetY,
                          icon: const Icon(Icons.more_vert),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
    Overlay.of(context).insert(_widgetW!);
  }

  // 显示Widget X
  void _showWidgetX() {
    _widgetY?.remove();
    _widgetY = null;

    final (position, size) = _getWidgetInfo(_greenContainerKey);
    _widgetX = OverlayEntry(
      builder: (context) => GestureDetector(
        onTap: _closeAllPopups,
        behavior: HitTestBehavior.translucent,
        child: Positioned(
          left: position.dx + size.width,
          top: position.dy,
          child: GestureDetector(
            onTap: () {},
            child: Material(
              elevation: 4,
              child: Container(
                width: 150,
                padding: const EdgeInsets.all(16),
                color: Colors.white,
                child: const Text('Widget X的内容'),
              ),
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_widgetX!);
  }

  // 显示Widget Y
  void _showWidgetY() {
    _widgetX?.remove();
    _widgetX = null;

    final (position, size) = _getWidgetInfo(_iconKey);
    _widgetY = OverlayEntry(
      builder: (context) => GestureDetector(
        onTap: _closeAllPopups,
        behavior: HitTestBehavior.translucent,
        child: Positioned(
          left: position.dx - 150,
          top: position.dy,
          child: GestureDetector(
            onTap: () {},
            child: Material(
              elevation: 4,
              child: Container(
                width: 150,
                padding: const EdgeInsets.all(16),
                color: Colors.white,
                child: const Text('Widget Y的内容'),
              ),
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_widgetY!);
  }

  @override
  void dispose() {
    _closeAllPopups();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(32),
        child: Container(
          padding: const EdgeInsets.all(16),
          color: Colors.grey[200],
          child: TextButton(
            key: _mainButtonKey,
            onPressed: () {
              _widgetW == null ? _showWidgetW() : _closeAllPopups();
            },
            child: const Text('点击弹出Widget W'),
          ),
        ),
      ),
    );
  }
}

关键逻辑说明： #

• 用GlobalKey获取组件位置，确保弹窗出现在目标位置（如W在主按钮正下方、X在绿色Container右侧）
• 外层GestureDetector监听外部点击触发关闭；内层GestureDetector阻止弹窗内部点击触发关闭逻辑
• 显示X/Y时先关闭另一个嵌套弹窗，避免同时显示多个
• 组件销毁时移除所有OverlayEntry，防止内存泄漏

内容的提问来源于stack exchange，提问作者José De Oliveira Guimarães