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

在Flutter开发中，有时我们需要为应用程序添加上下文菜单功能。simple_dart_context_menu 是一个简单易用的插件，可以帮助开发者快速实现这一需求。

以下是一个完整的示例代码，展示如何使用 simple_dart_context_menu 插件来创建上下文菜单。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('简单上下文菜单示例'),
        ),
        body: Center(
          child: ContextMenuExample(),
        ),
      ),
    );
  }
}

class ContextMenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 触发上下文菜单
        showContextMenu(context);
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: Center(
          child: Text(
            '右键点击这里',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }

  void showContextMenu(BuildContext context) {
    final SimpleContextMenuController controller = SimpleContextMenuController();

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleContextMenu(
          controller: controller,
          actions: [
            SimpleContextMenuAction(
              label: '复制',
              onTap: () {
                print('复制');
              },
            ),
            SimpleContextMenuAction(
              label: '剪切',
              onTap: () {
                print('剪切');
              },
            ),
            SimpleContextMenuAction(
              label: '粘贴',
              onTap: () {
                print('粘贴');
              },
            ),
          ],
        );
      },
    );
  }
}

代码说明

1. 导入插件：

   import 'package:simple_dart_context_menu/simple_dart_context_menu.dart';
   

   导入 simple_dart_context_menu 插件。

2. 主应用结构：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('简单上下文菜单示例'),
           ),
           body: Center(
             child: ContextMenuExample(),
           ),
         ),
       );
     }
   }
   

   创建了一个简单的Flutter应用，包含一个带有标题的 AppBar 和一个居中的 ContextMenuExample 小部件。

3. 上下文菜单触发逻辑：

   class ContextMenuExample extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: () {
           // 触发上下文菜单
           showContextMenu(context);
         },
         child: Container(
           width: 200,
           height: 200,
           color: Colors.blue,
           child: Center(
             child: Text(
               '右键点击这里',
               style: TextStyle(color: Colors.white),
             ),
           ),
         ),
       );
     }
   
     void showContextMenu(BuildContext context) {
       final SimpleContextMenuController controller = SimpleContextMenuController();
   
       showDialog(
         context: context,
         builder: (BuildContext context) {
           return SimpleContextMenu(
             controller: controller,
             actions: [
               SimpleContextMenuAction(
                 label: '复制',
                 onTap: () {
                   print('复制');
                 },
               ),
               SimpleContextMenuAction(
                 label: '剪切',
                 onTap: () {
                   print('剪切');
                 },
               ),
               SimpleContextMenuAction(
                 label: '粘贴',
                 onTap: () {
                   print('粘贴');
                 },
               ),
             ],
           );
         },
       );
     }
   }