flutter 桌面软件开发如何配置右键菜单

flutter 桌面软件开发实战课程：https://www.itying.com/category-88-b0.html

在开发桌面软件的时候，我们想点击右键弹出右键菜单。这个时候就可以使用右键菜单插件contextmenu或者contextual_menu来实现。

一、使用contextmenu实现flutter 桌面软件右键菜单

https://pub.dev/packages/contextmenu

1、安装依赖

dependencies:
  contextmenu: ^3.0.0

2、引入插件

import 'package:contextmenu/contextmenu.dart';

3、配置右键菜单

width 指定右键菜单的宽度

builder 配置右键菜单

child 配置子内容

Widget build(BuildContext context) {
    return Scaffold(
        body: ContextMenuArea(
          width: 200,
          builder: (context) {
            return [
              ListTile(
                title: const Text('Option 1'),
                onTap: () {
                  Navigator.of(context).pop();
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text('Whatever'),
                    ),
                  );
                },
              ),
              ListTile(
                leading: const Icon(Icons.model_training),
                title: const Text('Option 2'),
                onTap: () {
                  Navigator.of(context).pop();
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text('Foo!'),
                    ),
                  );
                },
              )
            ];
          },
          child: Row(
            children: const [LeftSide(), RightSide()],
          ) ,
    ));
  }

二、使用contextual_menu实现flutter桌面软件右键菜单配置

https://pub.dev/packages/contextual_menu

1、 main.dart中集成

1、安装依赖

dependencies:
  contextual_menu: ^0.1.2

2、引入插件

import 'package:contextual_menu/contextual_menu.dart';

3、Listener监听右键事件 弹出右键菜单

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

class _MyHomePageState extends State<MyHomePage> {
  //显示内容
  bool _shouldReact = false;
  //坐标位置
  Offset? _position;
  //弹出的位置
  final Placement _placement = Placement.bottomRight;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (event) {
        _shouldReact = event.kind == PointerDeviceKind.mouse &&
            event.buttons == kSecondaryMouseButton;
      },
      onPointerUp: (event) {
        if (!_shouldReact) return;

        _position = Offset(
          event.position.dx,
          event.position.dy,
        );

        _handleClickPopUp();
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('这是一个测试内容'),
        ),
        body: const Center(
          child: Text("测试组件"),         
          
        ),
      ),
    );
  }

  _handleClickPopUp() {
    Menu 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(),
      ],
    );

    popUpContextualMenu(
      menu,
      position: _position,
      placement: _placement,
    );
  }

4、 main.dart中集成、页面分离

1、封装 contextual_menu_utils.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:contextual_menu/contextual_menu.dart';
class ContextMenu extends StatefulWidget {
  final Widget child;
  const ContextMenu({super.key, required this.child}); 
  @override
  State<ContextMenu> createState() => _ContextMenuState();
}

class _ContextMenuState extends State<ContextMenu> {
    //显示内容
  bool _shouldReact = false;
  //坐标位置
  Offset? _position;
  //弹出的位置
  final Placement _placement = Placement.bottomRight;
  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (event) {
        _shouldReact = event.kind == PointerDeviceKind.mouse &&
            event.buttons == kSecondaryMouseButton;
      },
      onPointerUp: (event) {
        if (!_shouldReact) return;
        _position = Offset(
          event.position.dx,
          event.position.dy,
        );
        _handleClickPopUp();
      },
      child:widget.child
    );
  }

   _handleClickPopUp() {
    Menu menu = Menu(
      items: [
        MenuItem(
          label: '复制',
          onClick: (_) {
            print('Clicked Copy');
          },
        ),
         MenuItem(
          label: '全选',
          onClick: (_) {
            print('Clicked Select All');
          },
        ),
        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(),
      ],
    );

    popUpContextualMenu(
      menu,
      position: _position,
      placement: _placement,
    );
  }
}

2、调用组件

import 'contextual_menu_utils.dart';

...

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ContextMenu(
        
          child: MyHomePage(),
     ),
    );
 }