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

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

简介

contextmenu_plus 是一个用于在Flutter应用中显示Material设计风格的上下文菜单的插件。它支持触摸设备和桌面设备，并且具有现代化的设计，强调动画效果。该插件的代码非常简洁（不到250行），并且能够处理屏幕边缘和超出屏幕的问题。

功能特点

• 现代化设计：遵循Material Design指南，强调动画效果。
• 智能处理屏幕边缘：自动调整菜单位置，避免超出屏幕。
• 高效代码：插件代码简洁，易于维护和扩展。

示例图片

安装与使用

1. 添加依赖

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

dependencies:
  contextmenu_plus: ^latest_version

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

2. 基本用法

你可以通过 ContextMenuArea 小部件轻松地显示上下文菜单。以下是一个简单的示例：

import 'package:contextmenu/contextmenu_plus.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Context Menu'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: ContextMenuArea(
          builder: (context) => [
            ListTile(
              title: Text('Option 1'),
              onTap: () {
                Navigator.of(context).pop(); // 关闭菜单
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Whatever'), // 显示提示信息
                  ),
                );
              },
            ),
            ListTile(
              leading: Icon(Icons.model_training), // 图标
              title: Text('Option 2'),
              onTap: () {
                Navigator.of(context).pop(); // 关闭菜单
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Foo!'), // 显示提示信息
                  ),
                );
              },
            )
          ],
          child: Card(
            color: Theme.of(context).primaryColor, // 设置卡片颜色
            child: Center(
              child: Text(
                'Press somewhere for context menu.', // 提示文本
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimary, // 文本颜色
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 手动触发上下文菜单

如果你需要手动触发上下文菜单，可以使用 showContextMenu 方法。以下是一个示例：

import 'package:contextmenu/contextmenu_plus.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Widget> items = [
    ListTile(
      title: Text('Option 1'),
      onTap: () {
        Navigator.of(context).pop();
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Option 1 tapped')),
        );
      },
    ),
    ListTile(
      title: Text('Option 2'),
      onTap: () {
        Navigator.of(context).pop();
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Option 2 tapped')),
        );
      },
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Context Menu'),
      ),
      body: GestureDetector(
        onSecondaryTapDown: (details) {
          showContextMenu(
            details.globalPosition, // 触发点的位置
            context,
            items, // 菜单项
            verticalPadding: 8.0, // 上下边距
            width: 200.0, // 菜单宽度
          );
        },
        child: Center(
          child: Text('Long press to open context menu.'),
        ),
      ),
    );
  }
}

4. Web平台设置

在Web平台上，你需要禁用浏览器的默认右键菜单，以确保自定义的上下文菜单能够正常工作。你可以在 initState 和 dispose 中进行设置：

import 'package:contextmenu/contextmenu_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 在Web平台上禁用浏览器的上下文菜单
    if (kIsWeb) {
      BrowserContextMenu.disableContextMenu();
    }
  }

  [@override](/user/override)
  void dispose() {
    // 在Web平台上重新启用浏览器的上下文菜单
    if (kIsWeb) {
      BrowserContextMenu.enableContextMenu();
    }
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Context Menu'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: ContextMenuArea(
          builder: (context) => [
            ListTile(
              title: Text('Option 1'),
              onTap: () {
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Whatever'),
                  ),
                );
              },
            ),
            ListTile(
              leading: Icon(Icons.model_training),
              title: Text('Option 2'),
              onTap: () {
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Foo!'),
                  ),
                );
              },
            )
          ],
          child: Card(
            color: Theme.of(context).primaryColor,
            child: Center(
              child: Text(
                'Press somewhere for context menu.',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}