Flutter中如何在主页面获取PopupMenuItem的点击位置

核心思路 #

要在主页面获取PopupMenuItem的点击位置，需要在showPopupMenu中给每个菜单项添加触摸监听，获取点击位置后通过回调函数或异步返回结果的方式传递回主页面。

方案一：使用回调函数传递位置 #

1. 修改showPopupMenu函数

新增回调参数用于传递选中的菜单项和点击位置，同时用GestureDetector包裹菜单项内容监听点击事件：

void showPopupMenu(
  BuildContext context,
  TapDownDetails tap,
  List<String> menus,
  // 新增回调：接收选中的菜单项和点击位置
  void Function(String menuValue, Offset tapPosition)? onMenuItemTap,
) async {
  await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(
      tap.globalPosition.dx,
      tap.globalPosition.dy,
      0,
      0,
    ),
    // 用map遍历简化菜单项生成，替代原有的多if判断
    items: menus.map((menu) {
      return PopupMenuItem<String>(
        value: menu,
        child: GestureDetector(
          // 监听按下事件获取点击位置
          onTapDown: (details) {
            if (onMenuItemTap != null) {
              onMenuItemTap(menu, details.globalPosition);
            }
          },
          child: Text(menu),
        ),
      );
    }).toList(),
    elevation: 8.0,
  );
}

2. 主页面调用并接收位置

在InkWell的onTapDown中传入回调函数，即可在主页面获取点击位置：

InkWell(
  onTapDown: (TapDownDetails tap) {
    var menus = <String>['Edit', 'Delete'];
    showPopupMenu(
      context,
      tap,
      menus,
      // 在这里接收点击的菜单项和位置
      (selectedMenu, tapPosition) {
        print('选中了$selectedMenu，点击位置：$tapPosition');
        // 在这里处理位置相关逻辑
      },
    );
  },
  child: const Icon(Icons.more_vert, color: Colors.grey),
)

方案二：通过Future返回结果 #

如果习惯用异步返回值的方式，可以让showPopupMenu返回包含菜单项和位置的Future：

1. 修改showPopupMenu函数

Future<Map<String, dynamic>?> showPopupMenu(
  BuildContext context,
  TapDownDetails tap,
  List<String> menus,
) async {
  Map<String, dynamic>? result;
  await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(
      tap.globalPosition.dx,
      tap.globalPosition.dy,
      0,
      0,
    ),
    items: menus.map((menu) {
      return PopupMenuItem<String>(
        value: menu,
        child: GestureDetector(
          onTapDown: (details) {
            result = {
              'selectedMenu': menu,
              'tapPosition': details.globalPosition,
            };
          },
          child: Text(menu),
        ),
      );
    }).toList(),
    elevation: 8.0,
  );
  return result;
}

2. 主页面调用

InkWell(
  onTapDown: (TapDownDetails tap) async {
    var menus = <String>['Edit', 'Delete'];
    var menuResult = await showPopupMenu(context, tap, menus);
    if (menuResult != null) {
      String selectedMenu = menuResult['selectedMenu'];
      Offset tapPosition = menuResult['tapPosition'];
      print('选中了$selectedMenu，点击位置：$tapPosition');
      // 处理位置逻辑
    }
  },
  child: const Icon(Icons.more_vert, color: Colors.grey),
)

注意事项 #

• 使用GestureDetector的onTapDown而非onTap，能更准确获取触摸按下时的位置（二者位置差异可忽略，但onTapDown触发更早）。
• 原代码中多个if判断生成菜单项的逻辑可简化为map遍历，更简洁易维护。

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