flutter如何实现windows菜单功能

在Flutter中如何实现Windows风格的菜单功能？我尝试用PopupMenuButton但效果比较移动端化，想实现类似传统Windows应用的下拉菜单（如文件、编辑等菜单栏），并且支持快捷键绑定。是否有推荐的插件或实现方案？最好能兼顾Win32和UWP平台的兼容性。

2 回复

在Flutter中实现Windows菜单功能，可通过platform_menus插件或自定义RawKeyboardListener捕获快捷键。对于原生菜单，可结合window_manager插件设置应用菜单栏。

更多关于flutter如何实现windows菜单功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现Windows风格的菜单功能，可以通过以下两种主要方式：

1. 使用系统菜单（仅限Windows桌面）

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

class SystemMenuExample extends StatefulWidget {
  @override
  _SystemMenuExampleState createState() => _SystemMenuExampleState();
}

class _SystemMenuExampleState extends State<SystemMenuExample> {
  @override
  void initState() {
    super.initState();
    _setupSystemMenu();
  }

  Future<void> _setupSystemMenu() async {
    await windowManager.ensureInitialized();
    
    // 设置应用程序菜单
    Menu menu = Menu();
    menu.append(
      MenuItem(
        label: '文件(&F)',
        submenu: Menu()
          ..append(
            MenuItem(
              label: '新建(&N)',
              accelerator: 'Ctrl+N',
              onClick: () => _handleNewFile(),
            ),
          )
          ..append(
            MenuItem(
              label: '打开(&O)',
              accelerator: 'Ctrl+O',
              onClick: () => _handleOpenFile(),
            ),
          )
          ..append(MenuItem.separator())
          ..append(
            MenuItem(
              label: '退出(&X)',
              accelerator: 'Alt+F4',
              onClick: () => windowManager.close(),
            ),
          ),
      ),
    );
    
    menu.append(
      MenuItem(
        label: '编辑(&E)',
        submenu: Menu()
          ..append(
            MenuItem(
              label: '撤销(&Z)',
              accelerator: 'Ctrl+Z',
              enabled: false,
            ),
          )
          ..append(
            MenuItem(
              label: '重做(&Y)',
              accelerator: 'Ctrl+Y',
            ),
          ),
      ),
    );
    
    windowManager.setMenu(menu);
  }

  void _handleNewFile() {
    print('新建文件');
  }

  void _handleOpenFile() {
    print('打开文件');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('系统菜单示例')),
      body: Center(child: Text('检查窗口顶部菜单栏')),
    );
  }
}

依赖配置： 在 pubspec.yaml 中添加：

dependencies:
  window_manager: ^0.3.0

2. 使用自定义菜单组件（跨平台）

import 'package:flutter/material.dart';

class CustomMenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义菜单'),
        actions: [
          PopupMenuButton<String>(
            itemBuilder: (context) => [
              PopupMenuItem(
                value: 'new',
                child: Row(
                  children: [
                    Icon(Icons.add, size: 20),
                    SizedBox(width: 8),
                    Text('新建文件'),
                  ],
                ),
              ),
              PopupMenuItem(
                value: 'open',
                child: Row(
                  children: [
                    Icon(Icons.folder_open, size: 20),
                    SizedBox(width: 8),
                    Text('打开文件'),
                  ],
                ),
              ),
              PopupMenuDivider(),
              PopupMenuItem(
                value: 'exit',
                child: Row(
                  children: [
                    Icon(Icons.exit_to_app, size: 20),
                    SizedBox(width: 8),
                    Text('退出'),
                  ],
                ),
              ),
            ],
            onSelected: (value) {
              switch (value) {
                case 'new':
                  print('新建文件');
                  break;
                case 'open':
                  print('打开文件');
                  break;
                case 'exit':
                  // 退出逻辑
                  break;
              }
            },
          ),
        ],
      ),
      body: Center(
        child: Text('右键点击下方区域查看上下文菜单'),
      ),
    );
  }
}

主要区别：

  • 系统菜单：使用 window_manager 包，创建原生Windows菜单栏，外观和行为与系统一致
  • 自定义菜单：使用Flutter内置组件，跨平台兼容，但外观由Flutter渲染

选择哪种方式取决于你的需求：如果需要原生Windows体验，使用系统菜单；如果需要跨平台一致性，使用自定义菜单组件。

回到顶部