自定义 Electron 托盘，让桌面计算器也能开出下拉菜单

2023-10-14 02:00:33

自定义 Electron 托盘：打造更美观、更实用的应用程序

在 Electron 中，托盘（Tray）是允许用户访问应用程序的一种方便方式。然而，默认的托盘菜单有限，无法让用户自定义窗口视图。本文将指导您如何使用 tray 模块自定义 Electron 托盘，实现点击托盘后弹出下拉菜单的功能，从而提升应用程序的美观性和实用性。

自定义 Electron 托盘的步骤

1. 创建托盘图标

使用 tray.createImage() 方法，根据指定的图像路径创建托盘图标。

const trayIcon = tray.createImage('./icon.png');

2. 设置托盘图标

将创建的托盘图标添加到托盘中，使用 tray.set() 方法。

tray.set(trayIcon);

3. 添加菜单

通过 tray.setContextMenu() 方法，给托盘图标添加菜单，菜单选项通常包括应用程序的主要功能或设置。

const menu = Menu.buildFromTemplate([
  {
    label: '计算',
    click: () => {
      // 打开计算器窗口
    }
  },
  {
    label: '退出',
    click: () => {
      // 退出应用程序
    }
  }
]);

tray.setContextMenu(menu);

4. 显示下拉窗口

当用户点击托盘图标时，使用 tray.popUpContextMenu() 方法显示下拉窗口，指定位置对象以确定下拉窗口的位置。

tray.popUpContextMenu({ x: 100, y: 100 });

通过代码示例自定义 Electron 托盘

以下完整的代码示例展示了如何自定义 Electron 托盘：

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

function createWindow() {
  // 创建窗口代码
}

app.whenReady().then(() => {
  createWindow();

  const trayIcon = tray.createImage('./icon.png');
  tray.set(trayIcon);

  const menu = Menu.buildFromTemplate([
    {
      label: '计算',
      click: () => {
        // 打开计算器窗口
      }
    },
    {
      label: '退出',
      click: () => {
        app.quit();
      }
    }
  ]);

  tray.setContextMenu(menu);

  tray.on('click', () => {
    tray.popUpContextMenu({ x: 100, y: 100 });
  });
});