Flutter上下文菜单插件contextmenu的使用

contextmenu 是一个Flutter插件，用于在应用中显示美观的Material设计风格的上下文菜单。它支持触摸设备和桌面设备。

你可以在这里查看演示！

Features

根据Material Design指南强调动画效果
处理屏幕边缘和超大尺寸问题
代码非常高效（< 250行）

Getting Started

基本用法

你可以轻松地通过以下代码展示一个上下文菜单：

Widget build() {
  return ContextMenuArea(
    builder: (context) => [
      ListTile(
        title: Text('Option 1'),
        onTap: () {
          Navigator.of(context).pop();
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Whatever')));
        },
      )
    ],
    child: Card(
      color: Theme.of(context).primaryColor,
      child: Center(
        child: Text('Press somewhere for context menu.'),
      ),
    ),
  );
}

手动触发上下文菜单

如果你想手动触发上下文菜单，可以使用 showContextMenu() 方法：

Widget build() {
  return GestureDetector(
      onSecondaryTapDown: (details) =>
          showContextMenu(details.globalPosition, context, items, verticalPadding, width),
      child: Text('Tap!'));
}

Setup web

对于Web端的设置，在你的index.html中编辑并在<body>标签内添加以下内容：

<body oncontextmenu="return false;">

License

本项目采用EUPL许可证。更多详情请参阅LICENSE。

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中集成contextmenu插件：

import 'package:contextmenu/contextmenu.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Context Menu'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: ContextMenuArea(
          builder: (context) => [
            ListTile(
              title: Text('Option 1'),
              onTap: () {
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Whatever'),
                  ),
                );
              },
            ),
            ListTile(
              leading: Icon(Icons.model_training),
              title: Text('Option 2'),
              onTap: () {
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Foo!'),
                  ),
                );
              },
            )
          ],
          child: Card(
            color: Theme.of(context).primaryColor,
            child: Center(
              child: Text(
                'Press somewhere for context menu.',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这个示例创建了一个简单的Flutter应用程序，并在页面上添加了一个上下文菜单。当用户点击卡片时，会弹出一个包含两个选项的上下文菜单。每个选项都有相应的点击事件处理程序，用于执行特定的操作并显示Snackbar消息。

更多关于Flutter上下文菜单插件contextmenu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•2 天前

更多关于Flutter上下文菜单插件contextmenu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用contextmenu插件来实现上下文菜单（右键菜单）的示例代码。contextmenu插件允许你在Flutter应用中实现类似于桌面应用程序的上下文菜单功能。

首先，你需要在你的pubspec.yaml文件中添加contextmenu插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  contextmenu: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示如何在Flutter中使用contextmenu插件：

import 'package:flutter/material.dart';
import 'package:contextmenu/contextmenu.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Context Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Context Menu Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  ContextMenuController _contextMenuController = ContextMenuController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onContextMenu: (details) {
        // 在右键点击时显示上下文菜单
        _contextMenuController.show(
          context: context,
          position: details.globalPosition,
          items: [
            ContextMenuItem(
              child: Text('Item 1'),
              onTap: () {
                // 菜单项1点击事件
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('You clicked Item 1')),
                );
              },
            ),
            ContextMenuItem(
              child: Text('Item 2'),
              onTap: () {
                // 菜单项2点击事件
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('You clicked Item 2')),
                );
              },
            ),
            ContextMenuItem(
              child: Text('Item 3'),
              onTap: () {
                // 菜单项3点击事件
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('You clicked Item 3')),
                );
              },
            ),
          ],
        );
      },
      child: ListView(
        children: [
          ListTile(
            title: Text('Right click on this item to show context menu'),
          ),
          // 其他可交互的Widget
        ],
      ),
    );
  }
}

在这个示例中，我们做了以下事情：

在pubspec.yaml文件中添加了contextmenu插件的依赖。
创建了一个基本的Flutter应用，并在MyHomePage中使用了GestureDetector来监听右键点击事件。
当右键点击事件发生时，通过ContextMenuController显示上下文菜单。
在上下文菜单中定义了三个菜单项，每个菜单项都有一个点击事件处理函数。

注意：contextmenu插件的具体实现和API可能会随着版本更新而变化，所以请确保查看最新的插件文档和示例。如果插件的API有所变动，你可能需要调整上述代码以符合最新API。