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

进程: 主进程​
Tray是一个[EventEmitter][event-emitter].
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
})
Copied!

平台限制:

• 在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事件,而是附加上下文菜单到托盘图标。
2
​
3
### `new Tray(image)`
4
> 用途:**创建与 `image`关联的新托盘图标**
5
​
6
* `image` ([NativeImage](native-image.md) | String)
7
​
8
### 实例事件
9
​
10
`Tray` 模块内含下列事件:
11
​
12
#### 事件: 'click'
13
> 触发:**单击托盘图标时**
14
​
15
* `event` Event
16
* `altKey` Boolean
17
* `shiftKey` Boolean
18
* `ctrlKey` Boolean
19
* `metaKey` Boolean
20
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界
21
​
22
#### 事件: 'right-click' _macOS_ _Windows_
23
> 触发:**右击托盘图标时**
24
​
25
* `event` Event
26
* `altKey` Boolean
27
* `shiftKey` Boolean
28
* `ctrlKey` Boolean
29
* `metaKey` Boolean
30
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界
31
​
32
#### 事件: 'double-click' _macOS_ _Windows_
33
> 触发:**双击托盘图标时**
34
​
35
* `event` Event
36
* `altKey` Boolean
37
* `shiftKey` Boolean
38
* `ctrlKey` Boolean
39
* `metaKey` Boolean
40
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界
41
​
42
​
43
​
44
#### 事件: 'balloon-show' _Windows_
45
> 触发:**显示托盘气泡时**
46
​
47
#### 事件: 'balloon-click' _Windows_
48
> 触发:**点击托盘气泡时**
49
​
50
#### 事件: 'balloon-closed' _Windows_
51
> 触发:**因超时而关闭托盘气泡时**
52
​
53
#### 事件: 'drop' _macOS_
54
> 触发:**将任何内容拖动到托盘图标时**
55
​
56
#### 事件: 'drop-files' _macOS_
57
> 触发:**将文件拖动到托盘图标时**
58
​
59
* `event` Event
60
* `files` String[] - 被拖动文件的路径.
61
​
62
#### 事件: 'drop-text' _macOS_
63
> 触发:**将文本内容拖动到托盘图标时**
64
​
65
* `event` Event
66
* `text` String - 被拖动的文本
67
​
68
#### 事件: 'drag-enter' _macOS_
69
> 触发:**当拖动操作进入托盘图标时**
70
​
71
#### 事件: 'drag-leave' _macOS_
72
> 触发:**当拖动操作离开托盘图标时**
73
​
74
#### 事件: 'drag-end' _macOS_
75
> 触发:**托盘或其它地方结束拖动时**
76
​
77
## 实例方法
78
`Tray` 模块有以下方法:
79
​
80
#### `tray.destroy()`
81
> 用途:**销毁托盘图标**
82
​
83
#### `tray.setImage(image)`
84
> 用途:**设置与此托盘图标相关联的 `image`**
85
​
86
* `image` ([NativeImage](native-image.md) | String)
87
​
88
#### `tray.setPressedImage(image)` _macOS_
89
> 用途:**在macOS中点按托盘图标时,设置与此托盘图标相关联的 `image`**
90
​
91
* `image` [NativeImage](native-image.md)
92
​
93
#### `tray.setToolTip(toolTip)`
94
> 用途:**设置此托盘图标的悬停提示内容**
95
​
96
* `toolTip` String
97
​
98
#### `tray.setTitle(title)` _macOS_
99
> 用途:**状态栏里托盘图标旁边需要显示的标题**
100
​
101
* `title` String
102
​
103
#### `tray.setHighlightMode(mode)` _macOS_
104
> 用途:**当托盘图标被点击的时候,是否高亮它的背景色为蓝色**
105
​
106
* `mode` String - 高亮方式,可选以下:
107
* `selection` - 单击托盘图标或其上下文菜单处于打开状态时,进行高亮。这是默认值。
108
* `always` - 始终高亮
109
* `never` - 禁止高亮
110
​
111
​
112
**注意:** 当窗口可见性进行更改时,你可以使用 `highlightMode`模块让一个 [`BrowserWindow`](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
})
Copied!

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)

[event-emitter]: https://nodejs.org/api/events.html​