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

contextual_menu_plus

此插件允许Flutter桌面应用程序创建原生上下文菜单。

英文 | 简体中文

目录

• 上下文菜单插件contextual_menu_plus
  • 平台支持
  • 截图
  • 快速开始
    • 安装
    • 使用
  • 谁在使用它？
  • 相关链接
  • 许可证

平台支持

截图

macOS	Linux	Windows

快速开始

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  contextual_menu_plus: ^0.1.2

或者通过Git仓库直接引用：

dependencies:
  contextual_menu_plus:
    git:
      url: https://github.com/leanflutter/contextual_menu_plus.git
      ref: main

使用

以下是一个简单的使用示例：

import 'package:flutter/material.dart' hide MenuItem; // 避免与Material库冲突
import 'package:contextual_menu_plus/contextual_menu_plus.dart'; // 导入上下文菜单插件

// 定义上下文菜单
Menu menu = Menu(
  items: [
    MenuItem(
      label: '复制', // 菜单项名称
      icon: 'doc.on.doc', // 图标（使用SF Symbols图标）
      shortcutKey: 'C', // 快捷键
      shortcutModifiers: ShortcutModifiers(command: true), // 使用Command键（macOS）或Ctrl键（Windows）
      onClick: (_) {
        print('点击了复制'); // 点击事件处理
      },
    ),
    MenuItem(
      label: '禁用的项目', // 禁用的菜单项
      disabled: true,
    ),
    MenuItem.checkbox(
      key: 'checkbox1', // 唯一标识符
      label: '复选框1', // 菜单项名称
      checked: true, // 初始状态为选中
      onClick: (menuItem) {
        print('点击了复选框1'); // 点击事件处理
        menuItem.checked = !(menuItem.checked == true); // 切换选中状态
      },
    ),
    MenuItem.separator(), // 分隔线
  ],
);

// 显示上下文菜单
popUpContextualMenu(
  context, // 当前上下文
  menu, // 菜单实例
  placement: Placement.bottomLeft, // 菜单位置
);

示例代码

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

main.dart

import 'package:flutter/material.dart';
import 'package:bot_toast/bot_toast.dart';
import './pages/home.dart'; // 引入主页

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化Flutter绑定
  runApp(const MyApp()); // 启动应用
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: const Color(0xff416ff4), // 主色调
        canvasColor: Colors.white, // 画布颜色
        scaffoldBackgroundColor: const Color(0xffF7F9FB), // 页面背景色
        dividerColor: Colors.grey.withOpacity(0.3), // 分割线颜色
      ),
      builder: BotToastInit(), // 初始化BotToast插件
      navigatorObservers: [BotToastNavigatorObserver()], // 注册导航观察器
      home: const HomePage(), // 设置主页
    );
  }
}

home.dart

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('上下文菜单示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示上下文菜单
            popUpContextualMenu(
              context,
              menu, // 菜单实例
              placement: Placement.bottomLeft, // 菜单位置
            );
          },
          child: Text('右键点击我'),
        ),
      ),
    );
  }
}