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

特性

• 在所有桌面平台、移动平台和Web上工作的单一上下文菜单小部件。
• 可以在Android和iOS上过渡到本地拖放操作。
• iOS、macOS和Linux上的本地上下文菜单；Android、Windows和Web上的Flutter上下文菜单。
• 高级功能，如自定义提升图像、菜单和拖动预览、延迟菜单项（懒加载）和延迟菜单预览。

开始使用

super_context_menu 使用Rust来实现低级别的平台特定功能。如果您的系统没有安装Rust，插件会自动下载预编译的二进制文件。如果您希望从源代码编译Rust代码，可以通过 rustup 安装Rust。

安装 Rust

对于 macOS 或 Linux：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

对于 Windows，可以使用 Rust Installer。

确保 Rust 是最新版本：

rustup update

首次构建可能会花费一些时间，因为需要安装必要的Rust目标和其他依赖项（如NDK）。

使用示例

以下是一个基本的示例，展示如何使用 ContextMenuWidget 创建一个上下文菜单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Super Context Menu Example')),
        body: Center(
          child: ContextMenuWidget(
            child: Container(
              padding: EdgeInsets.all(16),
              color: Colors.blue,
              child: Text('Right-click me', style: TextStyle(color: Colors.white)),
            ),
            menuProvider: (_) {
              return Menu(
                children: [
                  MenuAction(title: 'Option 1', callback: () { print('Option 1 selected'); }),
                  MenuAction(title: 'Option 2', callback: () { print('Option 2 selected'); }),
                  MenuSeparator(),
                  Menu(title: 'Submenu', children: [
                    MenuAction(title: 'Submenu Item 1', callback: () { print('Submenu Item 1 selected'); }),
                    MenuAction(title: 'Submenu Item 2', callback: () { print('Submenu Item 2 selected'); }),
                  ]),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

运行示例项目

示例项目位于 super_context_menu/example 目录下。您可以按照以下步骤运行它：

flutter pub global activate melos # 如果您还没有安装melos
git clone https://github.com/superlistapp/super_native_extensions.git
cd super_native_extensions
melos bootstrap

然后可以在VSCode中打开该文件夹并运行 super_context_menu_example 启动配置。

复杂菜单示例

以下是包含更多复杂功能的完整示例，包括自定义提升图像、预览和拖动构建器等：

import 'package:flutter/material.dart';
import 'package:super_context_menu/super_context_menu.dart';
import 'package:super_drag_and_drop/super_drag_and_drop.dart';

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

// ... 其他类定义省略 ...

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: _PageLayout(
            itemZone: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Section(
                    description: const Text('Base context menu, without drag & drop.'),
                    child: _BaseContextMenu(),
                  ),
                  Section(
                    description: const Text('Base context menu, with drag & drop.'),
                    child: _BaseContextMenuWithDrag(),
                  ),
                  Section(
                    description: const Text('Complex context menu, with custom lift, preview and drag builders (mobile only).'),
                    child: _ComplexContextMenu(),
                  ),
                  Section(
                    description: const Text('Deferred menu preview (mobile only).'),
                    child: _DeferredMenuPreview(),
                  ),
                ].intersperse(const _Separator()).toList(growable: false),
              ),
            ),
            dropZone: const _DropZone(),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何创建不同类型的上下文菜单，包括基础菜单、带有拖放功能的菜单以及复杂的菜单配置。通过这些示例，您可以根据自己的需求定制上下文菜单的功能和外观。