登录
目录
当前位置： 首页 > 文档资料 > Electron 中文文档 >

系统托盘

优质
小牛编辑
125浏览
2023-12-01

系统托盘

添加图标和上下文菜单到系统通知区

进程：主进程

Tray 是一个 EventEmitter.

const { app, Menu, Tray } = require('electron')
let tray = null
app.on('ready', () => {
  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)
})

平台限制：

  • 在Linux上，如果支持，就使用应用程序指示器，否则将使用GtkStatusIcon。
  • 在仅支持应用程序指标的Linux发行版中，必须安装libappindicator1才能使任务栏图标正常工作。
  • 应用程序指标只有当它有一个上下文菜单时才会显示。
  • 当在Linux上使用应用程序指标时，它的 click事件将被忽略
  • 在Linux上，为了改变单独的MenuItem，你必须再次调用setContextMenu。 例如：
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' }
  ])
  // 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)
})
  • 在 Windows 上, 建议使用 ICO 图标来获得最佳视觉效果。

如果要在所有平台上保持完全相同的行为, 则不应依赖 click 事件, 并且始终将上下文菜单附加到任务栏图标。

Class: Tray

Add icons and context menus to the system's notification area.

Process: Main

Tray is an EventEmitter.

const { app, Menu, Tray } = require('electron')
let tray = null
app.on('ready', () => {
  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)
})

Platform limitations:

  • On Linux the app indicator will be used if it is supported, otherwise GtkStatusIcon will be used instead.
  • On Linux distributions that only have app indicator support, you have to install libappindicator1 to make the tray icon work.
  • App indicator will only be shown when it has a context menu.
  • When app indicator is used on Linux, the click event is ignored.
  • On Linux in order for changes made to individual MenuItems to take effect, you have to call setContextMenu again. For example:
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' }
  ])
  // 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)
})
  • On Windows it is recommended to use ICO icons to get best visual effects.

If you want to keep exact same behaviors on all platforms, you should not rely on the click event and always attach a context menu to the tray icon.

new Tray(image)

  • image (NativeImage | String)

创建与image关联的新任务栏图标。

new Tray(image)

  • image (NativeImage | String)

Creates a new tray icon associated with the image.

实例事件

Tray 对象会发出以下事件:

Instance Events

The Tray module emits the following events:

事件: 'click'

  • event KeyboardEvent
  • bounds Rectangle - 系统托盘图标的边界。
  • position Point - 事件的位置信息。

当该图标被点击时触发。

Event: 'click'

  • event KeyboardEvent
  • bounds Rectangle - The bounds of tray icon.
  • position Point - The position of the event.

Emitted when the tray icon is clicked.

Event: 'right-click' macOS Windows

  • event KeyboardEvent
  • bounds Rectangle - 系统托盘图标的边界。

当该图标被右击时触发。

Event: 'right-click' macOS Windows

  • event KeyboardEvent
  • bounds Rectangle - The bounds of tray icon.

Emitted when the tray icon is right clicked.

Event: 'double-click' macOS Windows

  • event KeyboardEvent
  • bounds Rectangle - 系统托盘图标的边界。

当该图标被双击时触发。

Event: 'double-click' macOS Windows

  • event KeyboardEvent
  • bounds Rectangle - The bounds of tray icon.

Emitted when the tray icon is double clicked.

Event: 'balloon-show' Windows

当系统托盘图标气泡显示时，触发该事件。

Event: 'balloon-show' Windows

Emitted when the tray balloon shows.

Event: 'balloon-click' Windows

当系统托盘气泡被点击时，触发该事件。

Event: 'balloon-click' Windows

Emitted when the tray balloon is clicked.

Event: 'balloon-closed' Windows

当系统托盘气泡因为超时被关闭或者用户手动关闭时，触发该事件。

Event: 'balloon-closed' Windows

Emitted when the tray balloon is closed because of timeout or user manually closes it.

Event: 'drop' macOS

当有任何拖动项拖到该任务栏图标上时，触发该事件。

Event: 'drop' macOS

Emitted when any dragged items are dropped on the tray icon.

Event: 'drop-files' macOS

  • event Event
  • files String[] - 拖至任务栏图标上的文件的路径。

当有任何文件被拖到该任务栏图标上时，触发该事件。

Event: 'drop-files' macOS

  • event Event
  • files String[] - The paths of the dropped files.

Emitted when dragged files are dropped in the tray icon.

Event: 'drop-text' macOS

  • event Event
  • text String - 拖至任务栏图标上的文字内容。

当有任何文字被拖到该任务栏图标上时，触发该事件。

Event: 'drop-text' macOS

  • event Event
  • text String - the dropped text string.

Emitted when dragged text is dropped in the tray icon.

Event: 'drag-enter' macOS

当有任何拖动操作进入（拖动未结束）该任务栏图标时，触发该事件。

Event: 'drag-enter' macOS

Emitted when a drag operation enters the tray icon.

Event: 'drag-leave' macOS

当有任何拖动操作离开该任务栏图标时，触发该事件。

Event: 'drag-leave' macOS

Emitted when a drag operation exits the tray icon.

Event: 'drag-end' macOS

当有任何拖动操作在托盘或其他地方结束时，触发该事件。

Event: 'drag-end' macOS

Emitted when a drag operation ends on the tray or ends at another location.

Event: 'mouse-enter' macOS

  • event KeyboardEvent
  • position Point - 事件的位置信息。

当鼠标进入该任务栏图标时，触发该事件。

Event: 'mouse-enter' macOS

  • event KeyboardEvent
  • position Point - The position of the event.

Emitted when the mouse enters the tray icon.

Event: 'mouse-leave' macOS

  • event KeyboardEvent
  • position Point - 事件的位置信息。

当鼠标离开该任务栏图标时，触发该事件。

Event: 'mouse-leave' macOS

  • event KeyboardEvent
  • position Point - The position of the event.

Emitted when the mouse exits the tray icon.

Event: 'mouse-move' macOS

  • event KeyboardEvent
  • position Point - 事件的位置信息。

当鼠标在该任务栏图标上移动时，触发该事件。

Event: 'mouse-move' macOS

  • event KeyboardEvent
  • position Point - The position of the event.

Emitted when the mouse moves in the tray icon.

实例方法

Tray 类拥有以下方法:

Instance Methods

The Tray class has the following methods:

tray.destroy()

立即销毁该任务栏图标

tray.destroy()

Destroys the tray icon immediately.

tray.setImage(image)

  • image (NativeImage | String)

设置image作为托盘中显示的图标

tray.setImage(image)

  • image (NativeImage | String)

Sets the image associated with this tray icon.

tray.setPressedImage(image) macOS

  • image (NativeImage | String)

在 macOS 中，设置image作为托盘图标被按下时显示的图标

tray.setPressedImage(image) macOS

  • image (NativeImage | String)

Sets the image associated with this tray icon when pressed on macOS.

tray.setToolTip(toolTip)

  • toolTip String

设置鼠标指针在托盘图标上悬停时显示的文本

tray.setToolTip(toolTip)

  • toolTip String

Sets the hover text for this tray icon.

tray.setTitle(title) macOS

  • title String

Sets the title displayed next to the tray icon in the status bar (Support ANSI colors).

tray.setTitle(title) macOS

  • title String

Sets the title displayed next to the tray icon in the status bar (Support ANSI colors).

tray.getTitle() macOS

  • title String

Returns String - the title displayed next to the tray icon in the status bar

tray.getTitle() macOS

  • title String

Returns String - the title displayed next to the tray icon in the status bar

tray.setHighlightMode(mode) macOS

  • mode String - 高亮模式选项，以下为可选值

    • selection - 当托盘图标本点击或托盘的上下文菜单打开时高亮显示托盘图标，这是mode的默认值
    • always - 总是高亮托盘图标
    • never - 从不高亮托盘图标

设置托盘图标背景 (蓝色) 高亮的时机

过时的

Note: 当窗口可见状态变化时你可以在BrowserWindow中使用 highlightMode 实现 'never' 和'always' 模式的切换

const { BrowserWindow, Tray } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
  win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
  tray.setHighlightMode('always')
})
win.on('hide', () => {
  tray.setHighlightMode('never')
})

tray.setHighlightMode(mode) macOS

  • mode String - Highlight mode with one of the following values:

    • selection - Highlight the tray icon when it is clicked and also when its context menu is open. This is the default.
    • always - Always highlight the tray icon.
    • never - Never highlight the tray icon.

Sets when the tray's icon background becomes highlighted (in blue).

Deprecated

Note: You can use highlightMode with a BrowserWindow by toggling between 'never' and 'always' modes when the window visibility changes.

const { BrowserWindow, Tray } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
  win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
  tray.setHighlightMode('always')
})
win.on('hide', () => {
  tray.setHighlightMode('never')
})

tray.setIgnoreDoubleClickEvents(ignore) macOS

  • ignore Boolean

Sets the option to ignore double click events. Ignoring these events allows you to detect every individual click of the tray icon.

This value is set to false by default.

tray.setIgnoreDoubleClickEvents(ignore) macOS

  • ignore Boolean

Sets the option to ignore double click events. Ignoring these events allows you to detect every individual click of the tray icon.

This value is set to false by default.

tray.getIgnoreDoubleClickEvents() macOS

Returns Boolean - Whether double click events will be ignored.

tray.getIgnoreDoubleClickEvents() macOS

Returns Boolean - Whether double click events will be ignored.

tray.displayBalloon(options) Windows

  • options Object

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

显示一个托盘气球通知.

tray.displayBalloon(options) Windows

  • options Object

    • icon (NativeImage | String) (optional) -
    • title String
    • content String

Displays a tray balloon.

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

  • menu Menu (可选)
  • position Point (可选) - 菜单弹出的位置.

弹出托盘图标的上下文菜单。如果传入了 menu 参数，将会弹出 menu 而不是托盘图标的上下文菜单

参数 position 只在 Windows 上可用， 并拥有默认值 (0, 0)。

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

  • menu Menu (optional)
  • position Point (optional) - The pop up position.

Pops up the context menu of the tray icon. When menu is passed, the menu will be shown instead of the tray icon's context menu.

The position is only available on Windows, and it is (0, 0) by default.

tray.setContextMenu(menu)

  • menu Menu | null

设置这个图标的内容菜单

tray.setContextMenu(menu)

  • menu Menu | null

Sets the context menu for this icon.

tray.getBounds() macOS Windows

返回 Rectangle

以Object类型返回托盘图标的bounds

tray.getBounds() macOS Windows

Returns Rectangle

The bounds of this tray icon as Object.

tray.isDestroyed()

返回 Boolean -判断托盘图标是否被销毁

tray.isDestroyed()

Returns Boolean - Whether the tray icon is destroyed.

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn