macOS 菜单栏中的电子数小部件

分享于2022年11月15日 electron javascript macos menubar system-tray 问答
【问题标题】:Electron number widget in macOS menubarmacOS 菜单栏中的电子数小部件
【发布时间】:2022-08-14 06:14:08
【问题描述】:

我目前正在寻找一种在 macOS 菜单栏中显示数值的方法。 iStat Menus 6 之类的工具表明可以在 macOS 菜单栏中显示高级小部件,例如数值和图表,请参阅 here

我想在我的电子应用程序中创建一个数字小部件。但是,我找不到开始的方法。我发现的是电子包中的托盘类。它允许使用像 png 这样的图像创建托盘图标:

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

let tray = null;

app.on(\'ready\', () => {
  tray = new Tray(path.join(__dirname, \'/Icon.png\'));

  if (process.platform === \'win32\') {
    tray.on(\'click\', tray.popUpContextMenu);
  }

  const menu = Menu.buildFromTemplate([
    {
      label: \'Quit\',
      click() { app.quit(); }
    }
  ]);

  tray.setToolTip(\'Clipmaster\');
  tray.setContextMenu(menu);
});

像 iStat 这样的应用程序如何创建如此强大的小部件?看起来 iStat 并未将其小部件呈现为图像。


【解决方案1】:

Electron 有一种(有限的)方式将文本放在 macOS 中的托盘图标旁边:

// API: tray.setTitle(title[, options])
tray.setTitle("foo")

不幸的是,这似乎就是如此。作为使跨平台开发更容易的抽象层,Electron 通常无法提供操作系统的所有原生功能。

iStat 未使用 Electron 框架(仅适用于 macOS)。查看 this question ,了解如何使用 Apple 的 Cocoa 框架将多行文本写入状态栏。

【讨论】: