跳转到主要内容

托盘

Class: Tray

向系统通知区域添加图标和上下文菜单。

进程:主进程

Tray 是一个 EventEmitter

const { app, Menu, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})
警告

Electron 的内置类不能被用户代码继承。更多信息,请参阅常见问题解答

平台注意事项

Linux

  • 托盘图标默认使用 StatusNotifierItem,当用户桌面环境不可用时,将改用 GtkStatusIcon
  • 当托盘图标收到用户激活时会发出 click 事件,但 StatusNotifierItem 规范并未指定哪种操作会导致激活,在某些环境中是左键单击,但在其他环境中可能是双击左键。
  • 为了使对单个 MenuItem 所做的更改生效,您必须再次调用 setContextMenu。例如:
const { app, Menu, Tray } = require('electron')

let appIcon = null
app.whenReady().then(() => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' }
])

// Make a change to the context menu
contextMenu.items[1].checked = false

// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})

macOS

  • 传递给 Tray 构造函数的图标应为 模板图像
  • 为确保您的图标在视网膜显示屏上不模糊,请确保您的 @2x 图像分辨率为 144dpi。
  • 如果您正在打包您的应用程序(例如,使用 webpack 进行开发),请确保文件名没有被修改或哈希化。文件名必须以 Template 结尾,并且 @2x 图像必须与标准图像具有相同的文件名,否则 macOS 将不会自动反转图像颜色或使用高密度图像。
  • 16x16(72dpi)和 32x32@2x(144dpi)对于大多数图标效果都很好。

Windows

  • 建议使用 ICO 图标以获得最佳视觉效果。

new Tray(image, [guid])

  • image (NativeImage | string)
  • guid string (可选) Windows macOS - 用于标识托盘图标的唯一字符串。必须符合 UUID 格式。

Windows

在 Windows 上,如果可执行文件已签名且签名在主题行中包含组织,则 GUID 将永久与该签名关联。托盘图标在系统托盘中的位置等操作系统级别设置将得以保留,即使可执行文件的路径发生更改。如果可执行文件未进行代码签名,则 GUID 将永久与可执行文件的路径关联。更改可执行文件的路径将导致托盘图标创建失败,并且必须使用新的 GUID。然而,强烈建议仅将 GUID 参数与代码签名可执行文件一起使用。如果应用程序定义了多个托盘图标,则每个图标都必须使用单独的 GUID。

macOS

在 macOS 上,guid 是一个用于唯一标识托盘图标并允许其在重新启动之间保持位置的字符串。对新的托盘项使用相同的字符串将在与使用该字符串的先前托盘项相同的位置创建它。

创建一个与 image 关联的新托盘图标。

实例事件

Tray 模块会发出以下事件:

事件:'click'

返回

当托盘图标被单击时发出。

请注意,在 Linux 上,当托盘图标收到激活时会发出此事件,这不一定是左键单击。

事件:'right-click' macOS Windows

返回

当托盘图标被右键单击时发出。

事件:'double-click' macOS Windows

返回

当托盘图标被双击时发出。

事件:'middle-click' Windows

返回

当托盘图标被中键单击时发出。

事件:'balloon-show' Windows

当托盘气球显示时发出。

事件:'balloon-click' Windows

当托盘气球被单击时发出。

事件:'balloon-closed' Windows

由于超时或用户手动关闭而导致托盘气球关闭时发出。

事件:'drop' macOS

当任何拖动的项目被放到托盘图标上时发出。

事件:'drop-files' macOS

返回

  • event Event
  • files string[] - 拖放文件的路径。

当拖放文件到托盘图标时发出。

事件:'drop-text' macOS

返回

  • event Event
  • text string - 拖放的文本字符串。

当拖放文本到托盘图标时发出。

事件:'drag-enter' macOS

当拖动操作进入托盘图标时发出。

事件:'drag-leave' macOS

当拖动操作退出托盘图标时发出。

事件:'drag-end' macOS

当拖动操作在托盘上结束或在其他位置结束时发出。

事件:'mouse-up' macOS

返回

当鼠标释放托盘图标单击时发出。

注意

如果您已通过 tray.setContextMenu 为您的托盘设置了上下文菜单,则不会发出此事件,这是 macOS 限制的结果。

事件:'mouse-down' macOS

返回

当鼠标单击托盘图标时发出。

事件:'mouse-enter' macOS Windows

返回

当鼠标进入托盘图标时发出。

事件:'mouse-leave' macOS Windows

返回

当鼠标离开托盘图标时发出。

事件:'mouse-move' macOS Windows

返回

当鼠标在托盘图标上移动时发出。

实例方法

Tray 类具有以下方法:

tray.destroy()

立即销毁托盘图标。

tray.setImage(image)

设置与此托盘图标关联的 image

tray.setPressedImage(image) macOS

在 macOS 上按下时设置与此托盘图标关联的 image

tray.setToolTip(toolTip)

  • toolTip string

设置此托盘图标的悬停文本。将文本设置为空字符串将删除工具提示。

tray.setTitle(title[, options]) macOS

  • title string
  • options Object (可选)
    • fontType string (可选) - 要显示的字体系列变体,可以是 monospacedmonospacedDigitmonospaced 在 macOS 10.15+ 中可用。留空时,标题使用默认系统字体。

设置显示在状态栏托盘图标旁边的标题(支持 ANSI 颜色)。

tray.getTitle() macOS

返回 string - 显示在状态栏托盘图标旁边的标题。

tray.setIgnoreDoubleClickEvents(ignore) macOS

  • ignore boolean

设置忽略双击事件的选项。忽略这些事件可让您检测托盘图标的每一次单独单击。

此值默认为 false。

tray.getIgnoreDoubleClickEvents() macOS

返回 boolean - 是否将忽略双击事件。

tray.displayBalloon(options) Windows

  • options Object
    • icon (NativeImage | string) (可选) - 当 iconTypecustom 时使用的图标。
    • iconType string (可选) - 可以是 noneinfowarningerrorcustom。默认为 custom
    • title string
    • content string
    • largeIcon boolean (可选) - 是否应使用大尺寸图标。默认为 true。映射到 NIIF_LARGE_ICON
    • noSound boolean (可选) - 不播放关联的声音。默认为 false。映射到 NIIF_NOSOUND
    • respectQuietTime boolean (可选) - 如果当前用户处于“安静时间”,则不显示气球通知。默认为 false。映射到 NIIF_RESPECT_QUIET_TIME

显示一个托盘气球。

tray.removeBalloon() Windows

移除托盘气球。

tray.focus() Windows

将焦点返回到任务栏通知区域。通知区域图标应在其完成 UI 操作时使用此消息。例如,如果图标显示快捷菜单,但用户按 ESC 取消,则使用 tray.focus() 将焦点返回到通知区域。

tray.popUpContextMenu([menu, position]) macOS Windows

  • menu Menu (可选)
  • position Point (可选) - 弹出位置。

弹出托盘图标的上下文菜单。当传递 menu 时,将显示 menu 而不是托盘图标的上下文菜单。

position 仅在 Windows 上可用,默认为 (0, 0)。

tray.closeContextMenu() macOS Windows

关闭通过 tray.setContextMenu() 设置的打开的上下文菜单。

tray.setContextMenu(menu)

  • menu Menu | null

为此图标设置上下文菜单。

tray.getBounds() macOS Windows

返回 Rectangle

此托盘图标的 boundsObject 形式返回。

tray.getGUID() macOS Windows

返回 string | null - 用于唯一标识托盘图标并允许其在重新启动之间保持位置的 GUID,如果未设置则返回 null。

tray.isDestroyed()

返回 boolean - 托盘图标是否已被销毁。