Flutter开发：点击省略号按钮如何弹出迷你选项抽屉？

你之前用系统Drawer的思路不对，因为Flutter的Drawer是和Scaffold绑定的全局侧边抽屉，没法作为局部弹窗使用。下面给你两种可行的实现方案：

方案一：用Flutter自带的PopupMenuButton（快速实现） #

这是最省心的方式，自带菜单弹出、点击关闭的逻辑，代码如下：

GestureDetector(
  child: const Icon(Icons.more_horiz),
  onTap: () {
    // 用PopupMenuButton的showMenu方法手动触发弹出
    showMenu(
      context: context,
      // 菜单弹出位置：对齐按钮的右下角，可根据布局调整偏移量
      position: RelativeRect.fromLTRB(
        MediaQuery.of(context).size.width - 80,
        60,
        0,
        0,
      ),
      items: [
        PopupMenuItem(
          value: 'remove',
          child: const Text('Remove friend'),
          onTap: () {
            // 延迟执行对话框，避免菜单关闭和对话框弹出的上下文冲突
            Future.delayed(const Duration(milliseconds: 100), () {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text('Remove Friend'),
                  content: const Text('Are you sure you want to remove this friend?'),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('Cancel'),
                    ),
                    TextButton(
                      onPressed: () {
                        // 这里编写移除好友的业务逻辑
                        Navigator.pop(context);
                      },
                      child: const Text('Confirm'),
                    ),
                  ],
                ),
              );
            });
          },
        ),
        PopupMenuItem(
          value: 'block',
          child: const Text('Block'),
          onTap: () {
            Future.delayed(const Duration(milliseconds: 100), () {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text('Block User'),
                  content: const Text('Are you sure you want to block this user?'),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('Cancel'),
                    ),
                    TextButton(
                      onPressed: () {
                        // 这里编写拉黑用户的业务逻辑
                        Navigator.pop(context);
                      },
                      child: const Text('Confirm'),
                    ),
                  ],
                ),
              );
            });
          },
        ),
      ],
    );
  },
)

方案二：自定义迷你抽屉（更灵活的样式控制） #

如果需要完全自定义菜单的外观（比如圆角、背景色、位置精度），可以用Overlay实现：

步骤1：定义全局Key获取按钮位置 #

在State类中添加：

final GlobalKey _moreButtonKey = GlobalKey();

步骤2：给更多按钮绑定Key #

GestureDetector(
  key: _moreButtonKey,
  child: const Icon(Icons.more_horiz),
  onTap: () => _showMiniDrawer(),
),

步骤3：实现_showMiniDrawer方法 #

void _showMiniDrawer() {
  // 获取按钮在屏幕上的位置和尺寸
  final RenderBox buttonRenderBox = _moreButtonKey.currentContext!.findRenderObject() as RenderBox;
  final Offset buttonPosition = buttonRenderBox.localToGlobal(Offset.zero);
  final Size buttonSize = buttonRenderBox.size;

  // 创建OverlayEntry渲染迷你菜单
  final OverlayEntry overlayEntry = OverlayEntry(
    builder: (context) => Positioned(
      // 菜单位置：按钮右侧偏移8px，顶部与按钮对齐
      left: buttonPosition.dx + buttonSize.width + 8,
      top: buttonPosition.dy,
      child: Material(
        elevation: 4,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          color: Colors.white,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {
                  // 关闭菜单
                  overlayEntry.remove();
                  // 弹出移除好友对话框
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: const Text('Remove Friend'),
                      content: const Text('Are you sure you want to remove this friend?'),
                      actions: [
                        TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
                        TextButton(
                          onPressed: () {
                            // 执行移除逻辑
                            Navigator.pop(context);
                          },
                          child: const Text('Confirm'),
                        ),
                      ],
                    ),
                  );
                },
                child: const Align(
                  alignment: Alignment.centerLeft,
                  child: Text('Remove friend'),
                ),
              ),
              const Divider(height: 1),
              TextButton(
                onPressed: () {
                  overlayEntry.remove();
                  // 弹出拉黑对话框
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: const Text('Block User'),
                      content: const Text('Are you sure you want to block this user?'),
                      actions: [
                        TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
                        TextButton(
                          onPressed: () {
                            // 执行拉黑逻辑
                            Navigator.pop(context);
                          },
                          child: const Text('Confirm'),
                        ),
                      ],
                    ),
                  );
                },
                child: const Align(
                  alignment: Alignment.centerLeft,
                  child: Text('Block'),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );

  // 将菜单添加到页面Overlay层
  Overlay.of(context)!.insert(overlayEntry);

  // 点击空白处关闭菜单
  Future.delayed(Duration.zero, () {
    showDialog(
      context: context,
      barrierColor: Colors.transparent,
      builder: (context) => GestureDetector(
        onTap: () {
          overlayEntry.remove();
          Navigator.pop(context);
        },
        child: const SizedBox(
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  });
}

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