Flutter中实现列表项长按在指定位置显示弹出菜单

要让弹出菜单显示在ListTile的精确位置（或手指长按位置），核心是通过RenderBox获取组件或触摸点的坐标，再构建RelativeRect传给showMenu的position参数。以下是两种常用实现方式：

方式一：基于ListTile组件位置显示菜单 #

适合让菜单固定显示在ListTile的下方（或其他相对组件的位置）：

ListTile(
  title: Text('列表项'),
  onLongPress: () {
    // 获取当前ListTile的RenderBox，用于获取位置和尺寸
    final RenderBox renderBox = context.findRenderObject() as RenderBox;
    // 将组件本地坐标转换为屏幕全局坐标
    final Offset offset = renderBox.localToGlobal(Offset.zero);
    final Size size = renderBox.size;

    showMenu(
      context: context,
      // 定义菜单相对位置：左=组件左边界，上=组件底部，右=组件右边界，下=组件顶部
      position: RelativeRect.fromLTRB(
        offset.dx,
        offset.dy + size.height,
        offset.dx + size.width,
        offset.dy,
      ),
      items: const [
        PopupMenuItem(child: Text('View')),
        PopupMenuItem(child: Text('Delete')),
      ],
    );
  },
)

方式二：基于手指长按的精确坐标显示菜单 #

如果需要菜单出现在手指长按的位置，用GestureDetector包裹ListTile，通过LongPressStartDetails获取触摸点坐标：

GestureDetector(
  onLongPressStart: (LongPressStartDetails details) {
    // 获取Overlay的RenderBox，用来限定菜单的显示范围
    final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;

    showMenu(
      context: context,
      position: RelativeRect.fromRect(
        // 以长按点为基准构建矩形（宽高设为0不影响菜单定位）
        Rect.fromLTWH(
          details.globalPosition.dx,
          details.globalPosition.dy,
          0,
          0,
        ),
        // 菜单可显示的范围为整个屏幕
        Offset.zero & overlay.size,
      ),
      items: const [
        PopupMenuItem(child: Text('View')),
        PopupMenuItem(child: Text('Delete')),
      ],
    );
  },
  child: ListTile(
    title: Text('列表项'),
  ),
)

关键说明 #

• RenderBox：Flutter中负责渲染的对象，通过它可以获取组件的尺寸、坐标等布局信息。
• localToGlobal：将组件内部的本地坐标转换为屏幕全局坐标，确保位置计算准确。
• RelativeRect：用来定义弹出菜单的相对位置，fromLTRB和fromRect是两种常用的构建方式，可根据需求调整参数改变菜单的显示位置。

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