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

Question

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

我来自 Angular 等 Web 开发。在 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 • 通道稳定。

Answer 3

您只需将脚本添加到项目中的

web\index.html

即可。

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

此更改后，应重新启动调试模式。使用 Flutter 3.3 进行测试。

在跨平台项目/环境中避免

import 'dart:html'

。 Flutter 也会警告你。

Answer 4

您可以使用：

BrowserContextMenu.disableContextMenu();

但是要小心，这会返回一个未来

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