Flutter桌面上下文菜单插件desktop_context_menu的使用

概述

desktop_context_menu 是一个用于在 Flutter 桌面应用中显示原生上下文菜单的插件。它支持 macOS 和 Windows 平台，并且提供了丰富的功能，如菜单项分隔符、快捷键等。

特性

• 原生上下文菜单
• 菜单项之间的分隔符
• 为菜单项指定快捷键

使用方法

安装

首先，在 pubspec.yaml 文件中添加 desktop_context_menu 依赖：

dependencies:
  flutter:
    sdk: flutter
  desktop_context_menu: ^0.2.0

然后运行 flutter pub get 来安装依赖。

显示上下文菜单

要调用上下文菜单，可以使用 showContextMenu 方法：

final selectedItem = await showContextMenu(menuItems: [...]);

如果用户在上下文菜单中选择了某个项，则返回该项；如果没有选择任何项，则返回 null。

创建菜单项

菜单项可以是 ContextMenuItem 或 ContextMenuSeparator 类型。

创建 ContextMenuItem

ContextMenuItem(
  title: 'Menu item title',
  onTap: () {
    // 执行某些操作...
  },
)

如果不设置 onTap 回调，菜单项将被禁用。

添加分隔符

在菜单项之间添加分隔符：

menuItems: [
  ContextMenuItem(
    title: 'Menu item title',
    onTap: () {
      // 执行某些操作...
    },
  ),
  ContextMenuSeparator(),
  ContextMenuItem(
    title: 'Disabled menu item',
  ),
]

定义快捷键

为菜单项定义快捷键：

ContextMenuItem(
  title: 'Copy',
  onTap: () {
    // 执行某些操作...
  },
  shortcut: SingleActivator(
    LogicalKeyboardKey.keyC,
    meta: Platform.isMacOS,
    control: Platform.isWindows,
  ),
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 desktop_context_menu 插件：

import 'dart:io';

import 'package:desktop_context_menu/desktop_context_menu.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Desktop Context Menu Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _openContextMenu = false;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (event) {
        _openContextMenu = event.kind == PointerDeviceKind.mouse &&
            event.buttons == kSecondaryMouseButton;
      },
      onPointerUp: (event) {
        if (!_openContextMenu) {
          return;
        }

        _openContextMenu = false;

        _showContextMenu();
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: const Center(
          child: Text('右键点击任意位置打开上下文菜单'),
        ),
      ),
    );
  }

  void _showContextMenu() async {
    final selectedItem = await showContextMenu(
      menuItems: [
        ContextMenuItem(
          title: '复制',
          onTap: () {},
          shortcut: SingleActivator(
            LogicalKeyboardKey.keyC,
            meta: Platform.isMacOS,
            control: Platform.isWindows,
          ),
        ),
        ContextMenuItem(
          title: '粘贴',
          onTap: () {},
          shortcut: SingleActivator(
            LogicalKeyboardKey.keyV,
            meta: Platform.isMacOS,
            control: Platform.isWindows,
          ),
        ),
        ContextMenuItem(
          title: '粘贴为值',
          onTap: () {},
          shortcut: SingleActivator(
            LogicalKeyboardKey.keyV,
            meta: Platform.isMacOS,
            control: Platform.isWindows,
            shift: true,
          ),
        ),
        const ContextMenuSeparator(),
        ContextMenuItem(
          title: '项目二',
          onTap: () {},
        ),
        const ContextMenuItem(title: '禁用项目'),
        const ContextMenuItem(
          title: '带快捷键的禁用项目',
          shortcut: SingleActivator(
            LogicalKeyboardKey.keyV,
            meta: true,
            shift: true,
          ),
        ),
        const ContextMenuSeparator(),
        ContextMenuItem(
          title: '放大',
          shortcut: const SingleActivator(
            LogicalKeyboardKey.add,
            alt: true,
          ),
          onTap: () {},
        ),
        ContextMenuItem(
          title: '缩小',
          shortcut: const SingleActivator(
            LogicalKeyboardKey.minus,
            alt: true,
          ),
          onTap: () {},
        ),
        const ContextMenuSeparator(),
        ContextMenuItem(
          title: '控制快捷键',
          shortcut: const SingleActivator(
            LogicalKeyboardKey.keyJ,
            control: true,
          ),
          onTap: () {},
        ),
      ],
    );

    if (selectedItem == null) {
      return null;
    }

    print(selectedItem.title);
  }
}

运行示例

1. 确保你已经安装了 Flutter 桌面开发环境。
2. 将上述代码保存到 lib/main.dart 文件中。
3. 运行 flutter run 命令启动应用。
4. 在应用窗口中右键点击任意位置，会弹出上下文菜单。

通过以上步骤，你可以在 Flutter 桌面应用中成功使用 desktop_context_menu 插件来显示原生上下文菜单。