我可以在 Flutter Web 应用程序中更改右键单击操作吗？

Question

我可以在 Flutter Web 应用程序中更改右键单击操作吗？

像 Google Drive 一样，我可以在Flutter Web应用程序中创建自定义菜单吗？。

Answer 1

下面是如何在flutter web app 中实现通过鼠标右键调用的工作上下文菜单的说明：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // Prevent default event handler
    document.onContextMenu.listen((event) => event.preventDefault());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: Listener(
          child: Icon(
            Icons.ac_unit,
            size: 48.0,
          ),
          onPointerDown: _onPointerDown,
        ),
      ),
    );
  }

  /// Callback when mouse clicked on `Listener` wrapped widget.
  Future<void> _onPointerDown(PointerDownEvent event) async {
    // Check if right mouse button clicked
    if (event.kind == PointerDeviceKind.mouse &&
        event.buttons == kSecondaryMouseButton) {
      final overlay =
          Overlay.of(context).context.findRenderObject() as RenderBox;
      final menuItem = await showMenu<int>(
          context: context,
          items: [
            PopupMenuItem(child: Text('Copy'), value: 1),
            PopupMenuItem(child: Text('Cut'), value: 2),
          ],
          position: RelativeRect.fromSize(
              event.position & Size(48.0, 48.0), overlay.size));
      // Check if menu item clicked
      switch (menuItem) {
        case 1:
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Copy clicket'),
            behavior: SnackBarBehavior.floating,
          ));
          break;
        case 2:
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              content: Text('Cut clicked'),
              behavior: SnackBarBehavior.floating));
          break;
        default:
      }
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

唯一要做的就是正确定位上下文菜单的左上角。

Answer 2

You*_*eng 5

防止默认上下文菜单

添加 oncontextmenu 属性到<html>标签中web/index.html：

<!DOCTYPE html>
<html oncontextmenu="event.preventDefault();">
<head>
...

Run Code Online (Sandbox Code Playgroud)

另请参阅： https: //developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes

这与/sf/answers/4534552501/（window.document只是标签）具有相同的效果<html>，但不会触发“避免在 Flutter Web 插件包之外使用仅 Web 的库”。警告或使用universal_html包。

注意：热重载不适用于这种更改，但您可以简单地刷新（F5）浏览器。

添加您的自定义上下文菜单

https://github.com/flutter/flutter/pull/74286不适用于您的用例

默认情况下，它应该显示在桌面上，但仅当右键单击基于 EditableText 的小部件时才显示。目前，右键单击其他地方没有任何作用。

目前，这也是故意不可定制或可重用的。这是一个临时解决方案，我们计划对其进行扩展。

一般来说，您可以用来GestureDetector.onSecondaryTap检测用户的右键单击。

归档时间：	5 年，7 月前
查看次数：	2959 次
最近记录：	4 年，11 月前