插件介绍

Custom Context Menus 是一个 Flutter 示例项目，展示了如何创建和自定义跨平台的上下文菜单，如移动端的文本选择工具栏或桌面端的右键菜单。该插件提供了丰富的示例，包括：

• 在应用任意位置创建上下文菜单
• 创建级联子菜单
• 自定义默认按钮
• 使用自定义小部件作为菜单
• 为不同字段类型（TextField、EditableText等）定制上下文菜单
• 在图片等非文本组件上显示上下文菜单
• 重新排序默认按钮

这个插件已被适配为支持鸿蒙（OpenHarmony）系统，您可以在鸿蒙设备上体验所有上下文菜单功能。

包的引入

由于这是为鸿蒙适配的自定义修改版本，需要通过 Git 形式引入。在您的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  url_launcher:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/url_launcher/url_launcher"

注意：context_menus 是一个示例项目，不是一个可以直接通过 pub.dev 安装的库。要使用它的功能，您需要将其作为 Flutter 模块或直接复制相关代码到您的项目中。

API 的调用

核心组件

ContextMenuRegion

ContextMenuRegion 是创建上下文菜单的核心组件，它可以监听用户的手势（右键点击或长按）并显示上下文菜单。

import 'package:flutter/material.dart';
import 'package:context_menus/context_menu_region.dart';

ContextMenuRegion(
  child: YourWidget(),
  contextMenuBuilder: (context, offset) {
    return _buildContextMenu(context);
  },
)

基本用法

创建简单的上下文菜单

ContextMenuRegion(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: const Center(child: Text('右键点击或长按显示菜单')),
  ),
  contextMenuBuilder: (context, offset) {
    return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: const Icon(Icons.copy),
            title: const Text('复制'),
            onTap: () {
              // 处理复制操作
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: const Icon(Icons.cut),
            title: const Text('剪切'),
            onTap: () {
              // 处理剪切操作
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: const Icon(Icons.paste),
            title: const Text('粘贴'),
            onTap: () {
              // 处理粘贴操作
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  },
)

为 TextField 自定义上下文菜单

TextField(
  contextMenuBuilder: (context, editableTextState) {
    return AdaptiveTextSelectionToolbar(
      anchors: editableTextState.contextMenuAnchors,
      children: [
        TextSelectionToolbarItemData(
          label: '自定义复制',
          onPressed: () {
            editableTextState.copySelection(SelectionChangedCause.toolbar);
            Navigator.pop(context);
          },
        ),
        TextSelectionToolbarItemData(
          label: '自定义粘贴',
          onPressed: () {
            editableTextState.pasteText(SelectionChangedCause.toolbar);
            Navigator.pop(context);
          },
        ),
      ],
    );
  },
)

创建级联子菜单

ContextMenuRegion(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
    child: const Center(child: Text('级联菜单示例')),
  ),
  contextMenuBuilder: (context, offset) {
    return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SubmenuButton(
            menuChildren: [
              MenuItemButton(
                child: const Text('子项1'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              MenuItemButton(
                child: const Text('子项2'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
            child: const Text('菜单'),
          ),
        ],
      ),
    );
  },
)

在鸿蒙上运行示例

要在鸿蒙设备上运行 context_menus 示例项目，请按照以下步骤操作：

1. 克隆仓库：

   git clone https://github.com/flutter/samples.git
   cd samples/experimental/context_menus
   

2. 修改 pubspec.yaml 文件，添加鸿蒙适配的依赖：

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
url_launcher:
git:
url: “https://gitcode.com/openharmony-tpc/flutter_packages.git”
path: “packages/url_launcher/url_launcher”

3. 为鸿蒙平台准备项目：
```bash
flutter create . --platforms ohos

4. 运行项目：

   flutter run -d ohos
   

总结

Custom Context Menus 是一个功能强大的 Flutter 示例项目，展示了如何在不同平台上创建和自定义上下文菜单。通过鸿蒙适配，您现在可以在鸿蒙设备上使用这些上下文菜单功能。

主要功能包括：

• 在应用任意位置创建上下文菜单
• 支持级联子菜单
• 自定义默认按钮和菜单样式
• 为不同类型的组件定制上下文菜单
• 支持右键点击和长按手势

如果您想了解更多关于如何在鸿蒙上使用 Flutter 的信息，欢迎加入开源鸿蒙跨平台社区：

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net