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

发布于 1周前 作者 nodeper 来自 Flutter

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

contextual_menu 是一个允许Flutter桌面应用程序创建本地上下文菜单的插件。它支持Linux、macOS和Windows平台。

平台支持

Linux macOS Windows
✔️ ✔️ ✔️

快速开始

安装

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

dependencies:
  contextual_menu: ^0.1.2

或者使用Git方式安装：

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

使用示例

下面是一个完整的示例，展示如何在Flutter应用中使用 contextual_menu 插件。

主程序文件 (main.dart)

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contextual Menu Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

主页文件 (home_page.dart)

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Menu _menu;

  @override
  void initState() {
    super.initState();
    _menu = Menu(
      items: [
        MenuItem(
          label: 'Copy',
          onClick: (_) {
            print('Clicked Copy');
          },
        ),
        MenuItem(
          label: 'Disabled item',
          disabled: true,
        ),
        MenuItem.checkbox(
          key: 'checkbox1',
          label: 'Checkbox1',
          checked: true,
          onClick: (menuItem) {
            print('Clicked Checkbox1');
            menuItem.checked = !(menuItem.checked == true);
          },
        ),
        MenuItem.separator(),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contextual Menu Example'),
      ),
      body: Center(
        child: GestureDetector(
          onSecondaryTapDown: (details) {
            popUpContextualMenu(
              _menu,
              position: details.globalPosition,
              placement: Placement.bottomLeft,
            );
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.grey[300],
            child: Center(
              child: Text('Right-click here to show menu'),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在页面中央放置了一个可点击的容器。当用户右键单击该容器时，会弹出一个上下文菜单，包含“复制”、“禁用项”和一个复选框项。

关于谁在使用它？

  • Biyi - 一个方便的翻译和字典应用程序。

相关链接

许可证

本项目采用 MIT 许可证，请参阅 LICENSE 文件获取更多信息。


这个Markdown文档详细介绍了如何使用 `contextual_menu` 插件来创建和显示上下文菜单，并提供了一个完整的示例代码供参考。

更多关于Flutter上下文菜单插件contextual_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter上下文菜单插件contextual_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用contextual_menu插件来实现上下文菜单的示例代码。这个插件允许你在长按某个组件时显示一个上下文菜单。

首先，确保你已经在pubspec.yaml文件中添加了contextual_menu依赖：

dependencies:
  flutter:
    sdk: flutter
  contextual_menu: ^latest_version  # 请替换为最新的版本号

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

接下来，是一个完整的示例代码，展示如何使用contextual_menu插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Contextual Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _menuKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contextual Menu Example'),
      ),
      body: Center(
        child: GestureDetector(
          key: _menuKey,
          onLongPress: () {
            showContextualMenu(
              context: context,
              key: _menuKey,
              items: [
                ContextualMenuItem(
                  title: 'Item 1',
                  onTap: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You tapped Item 1')),
                    );
                  },
                ),
                ContextualMenuItem(
                  title: 'Item 2',
                  onTap: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You tapped Item 2')),
                    );
                  },
                ),
                ContextualMenuItem(
                  title: 'Item 3',
                  onTap: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('You tapped Item 3')),
                    );
                  },
                ),
              ],
            );
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.amber,
            child: Center(
              child: Text(
                'Long Press Me',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个居中的容器。当用户长按这个容器时，会显示一个上下文菜单，菜单中包含三个选项。每个选项被点击时，会显示一个SnackBar通知用户哪个选项被点击了。

关键点：

  1. GlobalKey：用于标识触发上下文菜单的GestureDetector。
  2. showContextualMenu：显示上下文菜单的函数，接收上下文、GlobalKey和菜单项列表作为参数。
  3. ContextualMenuItem：定义菜单项的类，包括标题和点击回调。

这个示例提供了一个基本的使用contextual_menu插件的方法，你可以根据实际需求进一步定制和扩展菜单项和它们的行为。

回到顶部