类:Tray(系统托盘如Win右下角)

将图标和上下文菜单添加到系统托盘。

进程: 主进程

Tray是一个EventEmitter.

  1. const {app, Menu, Tray} = require('electron')
  2. let tray = null
  3. app.on('ready', () => {
  4.   tray = new Tray('/path/to/my/icon')
  5.   const contextMenu = Menu.buildFromTemplate([
  6.     {label: 'Item1', type: 'radio'},
  7.     {label: 'Item2', type: 'radio'},
  8.     {label: 'Item3', type: 'radio', checked: true},
  9.     {label: 'Item4', type: 'radio'}
  10.   ])
  11.   tray.setToolTip('这是我的应用程序.')
  12.   tray.setContextMenu(contextMenu)
  13. })

平台限制:

  • 在Windows上,建议使用ICO图标以获得最佳的视觉效果。
  • 如果应用程序指示器没有一个上下文菜单时,它将不会显示。
  • 在Linux中,如果支持应用程序指示器则使用它,否则使用 GtkStatusIcon。
  • 在Linux的发行版中,仅支持应用程序指示器,您需要安装 libappindicator1 ,以便使用托盘图标(tray icon)。
  • 在Linux中,如果使用了应用指示器, click事件则被忽略.
  • 在Linux中,为了让个别的 MenuItem 起效,你必须再次调用 setContextMenu .例如: ```JavaScript const {app, Menu, Tray} = require(‘electron’)

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

//更改上下文菜单 contextMenu.items[1].checked = false //因为我们修改了上下文菜单,所以再次为Linux调用 appIcon.setContextMenu(contextMenu) })

  1. 如果你想在所有平台上保持完全相同的行为,你不应该依赖于click事件,而是附加上下文菜单到托盘图标。
  3. ### `new Tray(image)`
  4. > 用途:**创建与 `image`关联的新托盘图标**
  6. * `image` ([NativeImage]($api-native-image.md) | String)
  8. ### 实例事件
  10.  `Tray` 模块内含下列事件:
  12. #### 事件: 'click'
  13. > 触发:**单击托盘图标时**
  15. * `event` Event
  16.   * `altKey` Boolean
  17.   * `shiftKey` Boolean
  18.   * `ctrlKey` Boolean
  19.   * `metaKey` Boolean
  20. * `bounds` [Rectangle]($api-structures-rectangle.md) - 托盘图标的边界
  22. #### 事件: 'right-click' _macOS_ _Windows_
  23. > 触发:**右击托盘图标时**
  25. * `event` Event
  26.   * `altKey` Boolean
  27.   * `shiftKey` Boolean
  28.   * `ctrlKey` Boolean
  29.   * `metaKey` Boolean
  30. * `bounds` [Rectangle]($api-structures-rectangle.md) - 托盘图标的边界
  32. #### 事件: 'double-click' _macOS_ _Windows_
  33. > 触发:**双击托盘图标时**
  35. * `event` Event
  36.   * `altKey` Boolean
  37.   * `shiftKey` Boolean
  38.   * `ctrlKey` Boolean
  39.   * `metaKey` Boolean
  40. * `bounds` [Rectangle]($api-structures-rectangle.md) - 托盘图标的边界
  44. #### 事件: 'balloon-show' _Windows_
  45. > 触发:**显示托盘气泡时**
  47. #### 事件: 'balloon-click' _Windows_
  48. > 触发:**点击托盘气泡时**
  50. #### 事件: 'balloon-closed' _Windows_
  51. > 触发:**因超时而关闭托盘气泡时**
  53. #### 事件: 'drop' _macOS_
  54. > 触发:**将任何内容拖动到托盘图标时**
  56. #### 事件: 'drop-files' _macOS_
  57. > 触发:**将文件拖动到托盘图标时**
  59. * `event` Event
  60. * `files` String[] - 被拖动文件的路径.
  62. #### 事件: 'drop-text' _macOS_
  63. > 触发:**将文本内容拖动到托盘图标时**
  65. * `event` Event
  66. * `text` String - 被拖动的文本
  68. #### 事件: 'drag-enter' _macOS_
  69. > 触发:**当拖动操作进入托盘图标时**
  71. #### 事件: 'drag-leave' _macOS_
  72. > 触发:**当拖动操作离开托盘图标时**
  74. #### 事件: 'drag-end' _macOS_
  75. > 触发:**托盘或其它地方结束拖动时**
  77. ## 实例方法
  78.  `Tray` 模块有以下方法:
  80. #### `tray.destroy()`
  81. > 用途:**销毁托盘图标**
  83. #### `tray.setImage(image)`
  84. > 用途:**设置与此托盘图标相关联的 `image`**
  86. * `image` ([NativeImage]($api-native-image.md) | String)
  88. #### `tray.setPressedImage(image)` _macOS_
  89. > 用途:**在macOS中点按托盘图标时,设置与此托盘图标相关联的 `image`**
  91. * `image` [NativeImage]($api-native-image.md)
  93. #### `tray.setToolTip(toolTip)`
  94. > 用途:**设置此托盘图标的悬停提示内容**
  96. * `toolTip` String
  98. #### `tray.setTitle(title)` _macOS_
  99. > 用途:**状态栏里托盘图标旁边需要显示的标题**
  101. * `title` String
  103. #### `tray.setHighlightMode(mode)` _macOS_
  104. > 用途:**当托盘图标被点击的时候,是否高亮它的背景色为蓝色**
  106. * `mode` String - 高亮方式,可选以下:
  107.   * `selection` - 单击托盘图标或其上下文菜单处于打开状态时,进行高亮。这是默认值。
  108.   * `always` - 始终高亮
  109.   * `never` - 禁止高亮
  112. **注意:** 当窗口可见性进行更改时,你可以使用 `highlightMode`模块让一个 [`BrowserWindow`]($api-browser-window.md) 切换为 `'never'` 或 `'always'` 模式.
  113. ```JavaScript
  114. const {BrowserWindow, Tray} = require('electron')
  115. const win = new BrowserWindow({width: 800, height: 600})
  116. const tray = new Tray('/path/to/my/icon')
  117. tray.on('click', () => {
  118.   win.isVisible() ? win.hide() : win.show()
  119. })
  120. win.on('show', () => {
  121.   tray.setHighlightMode('always')
  122. })
  123. win.on('hide', () => {
  124.   tray.setHighlightMode('never')
  125. })

tray.displayBalloon(options) Windows

用途:显示托盘气球

  • options Object
    • icon (NativeImage | String) - (可选)
    • title String - (可选)
    • content String - (可选)

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

用途:弹出托盘图标的上下文菜单

  • menu Menu (可选)
  • position Object (可选) - 弹出位置。
    • x Integer
    • y Integer

划过 menu时则显示 menu,而不是托盘图标的上下文菜单。position仅在Windows上可用,默认为(0,0)。

tray.setContextMenu(menu)

用途:设置此图标的上下文菜单。

  • menu Menu

tray.getBounds() macOS Windows

用途:获取此图标的 bounds对象(Rectangle)

tray.isDestroyed()

用途:判断托盘图标是否已被销毁( Boolean)