跳转至

托盘菜单

本指南将带你了解如何创建一个带有独立上下文菜单的系统托盘图标。

  • 在 macOS 上，图标将位于屏幕右上角的 菜单栏附加项 区域。
  • 在 Windows 上，图标将位于任务栏末尾的 通知区域。
  • 在 Linux 上，托盘的位置会根据你的桌面环境而有所不同。

创建托盘图标

你的 Electron 应用的托盘图标需要通过 Tray 类的一个实例以编程方式创建。该类构造函数需要一个 NativeImage 实例或兼容图标文件的路径。

[!NOTE] 文件格式因操作系统而异。更多详细信息，请参阅托盘 API 文档中的 平台注意事项 部分。

最小化到托盘

为了在所有窗口关闭时保持应用和系统托盘图标处于活动状态，你需要在 app 模块上为 window-all-closed 事件添加一个监听器。基础 Electron 模板通常会监听此事件，但在 Windows 和 Linux 上会退出应用，以模拟标准操作系统行为。

Setting up minimize to tray
app.on('window-all-closed', () => {
  // having this listener active will prevent the app from quitting.
})

附加上下文菜单

你可以通过将一个 Menu 实例传入 tray.setContextMenu 函数，将上下文菜单附加到 Tray 对象。

[!NOTE] 与常规上下文菜单不同，托盘上下文菜单不需要 使用 menu.popup API 手动处理。相反，Tray 对象会为你处理点击事件 （尽管 API 中存在各种与点击相关的事件，可用于高级用例）。

Creating a Tray menu that can quit the app
const { nativeImage } = require('electron/common')
const { app, Tray, Menu } = require('electron/main')

// save a reference to the Tray object globally to avoid garbage collection
let tray

// 16x16 red circle data URL
const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII=')

// The Tray can only be instantiated after the 'ready' event is fired
app.whenReady().then(() => {
  tray = new Tray(icon)
  const contextMenu = Menu.buildFromTemplate([
    { role: 'quit' }
  ])
  tray.setContextMenu(contextMenu)
})

[!TIP] 要了解有关在 Electron 中创建菜单的更多信息，请参阅菜单指南。

[!WARNING] 在 macOS 上，托盘中的顶级菜单项不可用 enabled 和 visibility 属性。

可运行的 Fiddle 演示

下面是一个可运行的示例，演示如何将各种菜单项附加到托盘的上下文菜单，以 帮助控制应用状态并与 Tray API 本身交互。

fiddle docs/fiddles/menus/tray-menu

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron