Flutter：如何实现长按聊天气泡在其上方弹出自定义Dialog？

showDialog默认就是居中显示的，要实现气泡上方的定位弹窗，用Overlay组件是更合适的方案——它能让你在屏幕任意位置渲染自定义组件，完全可控。

具体实现步骤如下：

1. 给聊天气泡绑定GlobalKey #

用来获取气泡在屏幕上的精确位置：

final GlobalKey _bubbleKey = GlobalKey();

// 聊天气泡组件
Widget chatBubble(String message) {
  return GestureDetector(
    key: _bubbleKey,
    onLongPress: _showPopupMenu,
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.blue[100],
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text(message),
    ),
  );
}

2. 实现长按触发的弹窗逻辑 #

通过OverlayEntry创建弹窗，并根据气泡位置计算弹窗的显示坐标：

void _showPopupMenu(BuildContext context) {
  // 获取气泡的RenderBox和屏幕位置
  final RenderBox renderBox = _bubbleKey.currentContext!.findRenderObject() as RenderBox;
  final Offset bubblePosition = renderBox.localToGlobal(Offset.zero);
  final Size bubbleSize = renderBox.size;

  // 创建OverlayEntry
  final OverlayEntry overlayEntry = OverlayEntry(
    builder: (context) => Positioned(
      // 弹窗显示在气泡上方，调整y轴偏移量让它刚好贴在气泡顶部
      left: bubblePosition.dx,
      top: bubblePosition.dy - 60, // 60是弹窗的高度，可根据实际调整
      child: Material(
        elevation: 4,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 120,
          height: 60,
          padding: EdgeInsets.symmetric(vertical: 8),
          child: Column(
            children: [
              TextButton(
                onPressed: () {
                  // 这里写回复逻辑
                  overlayEntry.remove();
                },
                child: Text('回复'),
              ),
              TextButton(
                onPressed: () {
                  // 这里写转发逻辑
                  overlayEntry.remove();
                },
                child: Text('转发'),
              ),
            ],
          ),
        ),
      ),
    ),
  );

  // 将弹窗插入到Overlay中
  Overlay.of(context).insert(overlayEntry);

  // 点击空白处关闭弹窗
  Future.delayed(Duration.zero, () {
    showDialog(
      context: context,
      barrierColor: Colors.transparent,
      builder: (_) => GestureDetector(
        onTap: () {
          overlayEntry.remove();
          Navigator.pop(context);
        },
        behavior: HitTestBehavior.opaque,
        child: Container(),
      ),
    );
  });
}

3. 补充优化点 #

• 可以根据屏幕边界调整弹窗位置，比如如果气泡太靠上，就把弹窗显示在气泡下方
• 给弹窗添加动画效果，比如淡入淡出或缩放，提升交互体验
• 把弹窗封装成独立组件，方便在多个聊天气泡中复用

这样就能实现长按气泡后，在气泡上方弹出指定的操作菜单，完全避开showDialog的居中限制。

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