macOS 菜單欄中的 Electron 數字小部件

Question

我目前正在尋找一種在 macOS 菜單欄中顯示數值的方法。 iStat Menus 6等工具表明，可以在 macOS 菜單欄中顯示高級小部件，如數值和圖表，請參見此處。

我想在我的 electron 應用程序中創建一個數字小部件。 但是，我找不到開始的方法。 我發現的是來自 electron package 的托盤 class。 它允許使用像 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 並未將其小部件呈現為圖像。

Answer 1

Electron 有一種（有限的）方式將文本放在 macOS 中的托盤圖標旁邊：

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

• 有關使用說明，請參閱Electron 文檔。
• 有關使用此 API 的示例，請參閱此 GitHub 存儲庫。

不幸的是，這似乎是 go 。 作為使跨平台開發更容易的抽象層，Electron 通常無法提供操作系統的所有原生功能。

iStat 未使用 Electron 框架（僅適用於 macOS）。 查看此問題，了解如何使用 Apple 的 Cocoa 框架將多行文本寫入狀態欄。