如何禁用 Flutter Web 上的上下文菜单？（右键单击，触摸按下）

Question

如何在 Flutter（2.x、网络/浏览器）中禁用上下文菜单，例如在移动设备上右键单击或触摸长按（例如 DevTools 移动视图）。

我从事 Angular 等网络开发工作。在 HTML/JS 中，它的工作方式如下：

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

但是如何在 Flutter 上做到这一点？是否有可以禁用的上下文菜单事件。阻止右键单击将不起作用。因为它也出现在移动长按上（发布时）。

Answer 1

目前官方暂无解决方案。这是相关的 GitHub 问题：flutter#78671.

解决方法：打开浏览器的开发工具，在控制台执行以下代码即可：

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

Flutter 的热重载不会重载页面。所以它将适用于整个会话。

Answer 2

这对我有用！

首先：

import 'dart:html' as html;

然后初始化此代码以防止右键单击鼠标显示上下文菜单。

html.document.body!
        .addEventListener('contextmenu', (event) => event.preventDefault());

在我的项目中，它适用于版本 Flutter 2.2.3 • 通道稳定。

How to disable the context menu on Flutter web? (right click, touch press)