Flutter中点击PopupMenuItem触发showDialog不显示的问题如何解决

根本原因 #

PopupMenuItem的onTap触发时，PopupMenu会自动执行pop操作销毁自身所属的上下文，此时直接调用showDialog使用的上下文已经被销毁，导致弹窗无法正常弹出。使用onSelected回调失效通常是未给PopupMenuItem设置对应value属性，导致回调无法匹配到选中项。

方案1：延迟执行showDialog逻辑 #

在onTap中使用帧回调，将弹窗逻辑推迟到当前帧绘制完成、PopupMenu完全销毁后执行，代码示例：

PopupMenuItem(
    child: const Text("Show dialog"),
    onTap: () { 
        // 加帧回调延迟执行弹窗逻辑
        WidgetsBinding.instance.addPostFrameCallback((_) {
            showDialog(
                context: context,
                barrierColor: Colors.black26,
                builder: (dialogContext) => const AlertDialog( 
                    // 对话框内容
                    title: Text("提示"),
                    content: Text("这是弹出的对话框"),
                )
            );
        });
    },
),

方案2：使用PopupMenuButton的onSelected回调 #

给每个PopupMenuItem设置唯一的value属性，通过onSelected监听选中项触发弹窗，代码示例：

PopupMenuButton(
    onSelected: (value) {
        if(value == "showDialog") {
            showDialog(
                context: context,
                barrierColor: Colors.black26,
                builder: (dialogContext) => const AlertDialog( 
                    title: Text("提示"),
                    content: Text("这是弹出的对话框"),
                )
            );
        }
    },
    itemBuilder: (context) => [
        PopupMenuItem(
            value: "showDialog", // 必须设置value才能触发onSelected
            child: const Text("Show dialog"),
        ),
        // 其他菜单项
    ]
)

注意事项 #

• 调用showDialog时传入的context必须是当前页面有效的上下文，不能使用PopupMenu内部的临时上下文
• showDialog的builder参数内的context建议重命名避免和外层context冲突，防止出现上下文使用错误

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