托盘¶
类: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)
})
[!TIP] 另请参阅:关于如何实现托盘菜单的详细指南。
[!WARNING] 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)guidstring(可选) Windows macOS - 用于标识托盘图标的唯一字符串。必须符合 UUID 格式。
Windows
在 Windows 上,如果可执行文件已签名,并且签名主题行中包含组织,则 GUID 将永久与该签名关联。操作系统级别的设置(例如系统托盘中托盘图标的位置)即使可执行文件路径发生变化也会保留。如果可执行文件未进行代码签名,则 GUID 将永久与可执行文件路径关联。更改可执行文件路径会破坏托盘图标的创建,并且必须使用新的 GUID。但是,强烈建议仅在配合代码签名可执行文件时使用 GUID 参数。如果应用程序定义了多个托盘图标,则每个图标必须使用单独的 GUID。
MacOS
在 macOS 上,guid 是用于唯一标识托盘图标并使其在重新启动之间保留位置的字符串。对新托盘项使用相同的字符串会将其创建在之前使用该字符串的托盘项的相同位置。
创建一个与 image 关联的新托盘图标。
实例事件¶
Tray 模块会发出以下事件:
事件:'click'¶
返回值:
eventKeyboardEventboundsRectangle - 托盘图标的边界。positionPoint - 事件的位置。
当托盘图标被单击时发出。
请注意,在 Linux 上,当托盘图标接收到激活时发出此事件, 这不一定一定是鼠标左键单击。
事件:'right-click' macOS Windows¶
返回值:
eventKeyboardEventboundsRectangle - 托盘图标的边界。
当托盘图标被右键单击时发出。
事件:'double-click' macOS Windows¶
返回值:
eventKeyboardEventboundsRectangle - 托盘图标的边界。
当托盘图标被双击时发出。
事件:'middle-click' Windows¶
返回值:
eventKeyboardEventboundsRectangle - 托盘图标的边界。
当托盘图标被中键单击时发出。
事件:'balloon-show' Windows¶
当托盘气泡显示时发出。
事件:'balloon-click' Windows¶
当托盘气泡被单击时发出。
事件:'balloon-closed' Windows¶
当托盘气泡因超时或用户手动关闭而关闭时发出。
事件:'drop' macOS¶
当任何拖动的项被放到托盘图标上时发出。
事件:'drop-files' macOS¶
返回值:
eventEventfilesstring[] - 被放置文件的路径。
当拖动的文件被放到托盘图标上时发出。
事件:'drop-text' macOS¶
返回值:
eventEventtextstring - 被放置的文本字符串。
当拖动的文本被放到托盘图标上时发出。
事件:'drag-enter' macOS¶
当拖动操作进入托盘图标时发出。
事件:'drag-leave' macOS¶
当拖拽操作离开托盘图标时发出。
事件:'drag-end' macOS¶
当拖拽操作在托盘上结束或在其他位置结束时发出。
事件:'mouse-up' macOS¶
返回值:
eventKeyboardEventpositionPoint - 事件的位置。
当鼠标在点击托盘图标后释放时发出。
[!NOTE] 如果已通过
tray.setContextMenu为 Tray 设置了上下文菜单,则由于 macOS 层面的限制,此事件将不会发出。
事件:'mouse-down' macOS¶
返回值:
eventKeyboardEventpositionPoint - 事件的位置。
当鼠标点击托盘图标时发出。
事件:'mouse-enter' macOS Windows¶
返回值:
eventKeyboardEventpositionPoint - 事件的位置。
当鼠标进入托盘图标时发出。
事件:'mouse-leave' macOS Windows¶
返回值:
eventKeyboardEventpositionPoint - 事件的位置。
当鼠标离开托盘图标时发出。
事件:'mouse-move' macOS Windows¶
返回值:
eventKeyboardEventpositionPoint - 事件的位置。
当鼠标在托盘图标内移动时发出。
实例方法¶
Tray 类具有以下方法:
tray.destroy()¶
立即销毁托盘图标。
tray.setImage(image)¶
image(NativeImage | string)
设置与此托盘图标关联的 image。
tray.setPressedImage(image) macOS¶
image(NativeImage | string)
在 macOS 上按下时,设置与此托盘图标关联的 image。
tray.setToolTip(toolTip)¶
toolTipstring
设置此托盘图标的悬停文本。将文本设置为空字符串会移除工具提示。
tray.setTitle(title[, options]) macOS¶
titlestringoptionsObject(可选)fontTypestring(可选) - 要显示的字体族变体,可以是monospaced或monospacedDigit。monospaced在 macOS 10.15+ 中可用。留空时,标题使用默认系统字体。
设置状态栏中托盘图标旁边显示的标题(支持 ANSI 颜色)。
tray.getTitle() macOS¶
返回 string - 状态栏中托盘图标旁边显示的标题
tray.setIgnoreDoubleClickEvents(ignore) macOS¶
ignoreboolean
设置忽略双击事件的选项。忽略这些事件可让你检测托盘图标的每一次单独点击。
此值默认为 false。
tray.getIgnoreDoubleClickEvents() macOS¶
返回 boolean - 是否忽略双击事件。
tray.displayBalloon(options) Windows¶
optionsObjecticon(NativeImage | string)(可选) - 当iconType为custom时使用的图标。iconTypestring(可选) - 可以是none、info、warning、error或custom。默认为custom。titlestringcontentstringlargeIconboolean(可选) - 应使用图标的大版本。默认为true。映射到NIIF_LARGE_ICON。noSoundboolean(可选) - 不播放关联的声音。默认为false。映射到NIIF_NOSOUND。respectQuietTimeboolean(可选) - 如果当前用户处于“安静时间”,则不显示气泡通知。默认为false。映射到NIIF_RESPECT_QUIET_TIME。
显示托盘气泡。
tray.removeBalloon() Windows¶
移除托盘气泡。
tray.focus() Windows¶
将焦点返回到任务栏通知区域。
通知区域图标在完成其 UI 操作后应使用此消息。
例如,如果图标显示快捷菜单,但用户按 ESC 取消,
请使用 tray.focus() 将焦点返回到通知区域。
tray.popUpContextMenu([menu, position]) macOS Windows¶
menuMenu(可选)positionPoint(可选) - 弹出位置。
弹出托盘图标的上下文菜单。当传入 menu 时,将显示 menu 而不是托盘图标的上下文菜单。
position 仅在 Windows 上可用,默认为 (0, 0)。
tray.closeContextMenu() macOS Windows¶
关闭已打开的上下文菜单,该上下文菜单由 tray.setContextMenu() 设置。
tray.setContextMenu(menu)¶
menuMenu | null
为此图标设置上下文菜单。
tray.getBounds() macOS Windows¶
返回 Rectangle
此托盘图标的 bounds,类型为 Object。
tray.getGUID() macOS Windows¶
返回 string | null - 用于唯一标识托盘图标并允许其在重新启动之间保留位置的 GUID,如果未设置则为 null。
tray.isDestroyed()¶
返回 boolean - 托盘图标是否已销毁。
平台注意事项¶
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图标以获得最佳视觉效果。
本页原文 Markdown:在 AtomGit 查看·内容源自开源项目 el/electron