Flutter实现点击更多图标弹出带编辑删除功能的菜单及位置控制

直接用Flutter自带的PopupMenuButton就能实现你要的弹窗菜单，同时支持自定义位置和操作逻辑，替换你原来的InkWell即可：

完整代码示例 #

PopupMenuButton<String>(
  // 保持你原来的图标样式
  icon: Icon(
    Icons.more_horiz,
    size: 18,
    color: Color.fromRGBO(0, 0, 0, 0.25),
  ),
  // 控制菜单显示位置
  position: PopupMenuPosition.under, // 可选under（图标下方）/over（图标上方）
  offset: Offset(0, 10), // 自定义偏移量，调整菜单与图标的间距
  // 菜单选项选中后的处理逻辑
  onSelected: (value) {
    switch (value) {
      case 'edit':
        // 跳转到编辑页面，替换成你的目标页面
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const EditPage()),
        );
        break;
      case 'delete':
        // 弹出删除确认框，避免误操作
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: const Text('确认删除'),
            content: const Text('确定要删除这条内容吗？'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('取消'),
              ),
              TextButton(
                onPressed: () {
                  // 这里写删除的业务逻辑
                  Navigator.pop(context);
                },
                child: const Text('删除'),
              ),
            ],
          ),
        );
        break;
    }
  },
  // 定义菜单选项
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem<String>(
      value: 'edit',
      child: Text('编辑'),
    ),
    const PopupMenuItem<String>(
      value: 'delete',
      child: Text('删除'),
    ),
  ],
)

关键细节说明 #

1. 菜单位置控制 #

• position：直接设置菜单在图标上方还是下方显示
• offset：用偏移量微调位置，比如Offset(0,10)让菜单和图标保持10像素间距，避免紧贴

2. 自定义位置进阶（精准控制） #

如果PopupMenuButton的默认位置满足不了需求，用showMenu方法手动控制位置：

InkWell(
  onTap: () async {
    // 获取按钮和屏幕渲染区域
    final RenderBox button = context.findRenderObject() as RenderBox;
    final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
    final Offset buttonOffset = button.localToGlobal(Offset.zero, ancestor: overlay);

    // 手动指定菜单显示位置
    final String? selected = await showMenu<String>(
      context: context,
      position: RelativeRect.fromLTRB(
        buttonOffset.dx,
        buttonOffset.dy + button.size.height,
        overlay.size.width - buttonOffset.dx - button.size.width,
        overlay.size.height - buttonOffset.dy,
      ),
      items: [
        const PopupMenuItem(value: 'edit', child: Text('编辑')),
        const PopupMenuItem(value: 'delete', child: Text('删除')),
      ],
    );

    // 处理选中逻辑（和上面一致）
    if (selected == 'edit') {
      Navigator.push(context, MaterialPageRoute(builder: (context) => const EditPage()));
    }
  },
  child: const Icon(Icons.more_horiz, size: 18, color: Color.fromRGBO(0,0,0,0.25)),
)

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