如何在flutter桌面中自定义AppMenu（MenuBar）？

Question

我是颤振的新手，并根据要求执行一项任务。

我正在创建一个可以在所有平台上运行的应用程序，如 iOS、Android、桌面（MacOS、Linux、Windows）和网络。

现在客户端想要自定义 MenuBar 并添加一些额外的操作并设置 MenuItem 的分组。

菜单栏如下所示：

有没有可能通过flutter来完成这个任务？

Answer 1

原型menubar插件提供了有限的控制应用程序菜单的能力。

Answer 2

从 flutter 3.7 开始，您可以将 PlatformMenuBar 小部件用于本机菜单栏。您可以在下面的示例中看到这一点

\n

import \'package:flutter/material.dart\';\nimport \'package:flutter/services.dart\';\n\nclass Login extends StatelessWidget {\n  const Login({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return const Scaffold(\n      body: PlatformMenuBarExample(),\n    );\n  }\n}\n\nclass PlatformMenuBarExample extends StatefulWidget {\n  const PlatformMenuBarExample({super.key});\n\n  @override\n  State<PlatformMenuBarExample> createState() => _PlatformMenuBarExampleState();\n}\n\nclass _PlatformMenuBarExampleState extends State<PlatformMenuBarExample> {\n  String _message = \'Hello\';\n  bool _showMessage = false;\n\n  void _handleMenuSelection(MenuSelection value) {\n    switch (value) {\n      case MenuSelection.about:\n        showAboutDialog(\n          context: context,\n          applicationName: \'MenuBar Sample\',\n          applicationVersion: \'1.0.0\',\n        );\n        break;\n      case MenuSelection.showMessage:\n        setState(() {\n          _showMessage = !_showMessage;\n        });\n        break;\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    ////////////////////////////////////\n    // THIS SAMPLE ONLY WORKS ON MACOS.\n    ////////////////////////////////////\n\n    // This builds a menu hierarchy that looks like this:\n    // Flutter API Sample\n    //  \xe2\x94\x9c About\n    //  \xe2\x94\x9c \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80  (group divider)\n    //  \xe2\x94\x9c Hide/Show Message\n    //  \xe2\x94\x9c Messages\n    //  \xe2\x94\x82  \xe2\x94\x9c I am not throwing away my shot.\n    //  \xe2\x94\x82  \xe2\x94\x94 There\'s a million things I haven\'t done, but just you wait.\n    //  \xe2\x94\x94 Quit\n    return PlatformMenuBar(\n      menus: <PlatformMenuItem>[\n        PlatformMenu(\n          label: \'Flutter API Sample\',\n          menus: <PlatformMenuItem>[\n            PlatformMenuItemGroup(\n              members: <PlatformMenuItem>[\n                PlatformMenuItem(\n                  label: \'About\',\n                  onSelected: () {\n                    _handleMenuSelection(MenuSelection.about);\n                  },\n                ),\n              ],\n            ),\n            PlatformMenuItemGroup(\n              members: <PlatformMenuItem>[\n                PlatformMenuItem(\n                  onSelected: () {\n                    _handleMenuSelection(MenuSelection.showMessage);\n                  },\n                  shortcut: const CharacterActivator(\'m\'),\n                  label: _showMessage ? \'Hide Message\' : \'Show Message\',\n                ),\n                PlatformMenu(\n                  label: \'Messages\',\n                  menus: <PlatformMenuItem>[\n                    PlatformMenuItem(\n                      label: \'I am not throwing away my shot.\',\n                      shortcut: const SingleActivator(LogicalKeyboardKey.digit1,\n                          meta: true),\n                      onSelected: () {\n                        setState(() {\n                          _message = \'I am not throwing away my shot.\';\n                        });\n                      },\n                    ),\n                    PlatformMenuItem(\n                      label:\n                          "There\'s a million things I haven\'t done, but just you wait.",\n                      shortcut: const SingleActivator(LogicalKeyboardKey.digit2,\n                          meta: true),\n                      onSelected: () {\n                        setState(() {\n                          _message =\n                              "There\'s a million things I haven\'t done, but just you wait.";\n                        });\n                      },\n                    ),\n                  ],\n                ),\n                \n              ],\n            ),\n            if (PlatformProvidedMenuItem.hasMenu(\n                PlatformProvidedMenuItemType.quit))\n              const PlatformProvidedMenuItem(\n                  type: PlatformProvidedMenuItemType.quit),\n          ],\n        ),\n        \n      ],\n      child: Center(\n        child: Text(_showMessage\n            ? _message\n            : \'This space intentionally left blank.\\n\'\n                \'Show a message here using the menu.\'),\n      ),\n    );\n  }\n}\n\nenum MenuSelection {\n  about,\n  showMessage,\n}\n

\n

\n

参考： https: //api.flutter.dev/flutter/widgets/PlatformMenuBar-class.html

\n