在Electron中，如何保留原来的红绿灯按钮？

Question

在 macOS 上开发 Electron 应用程序时，我想将窗口设置为无框架并使用系统默认的红绿灯按钮。

我最初计划使用 HTML 构建一个，但我意识到 VS Code 中的那个是内置的。我找不到如何设置。

我浏览了 Electron 文档，但没有找到我正在寻找的答案。我想达到与VS Code中相同的效果。其他人也遇到过这种需求吗？

Answer 1

您可以使用我去年制作的一个名为 Electron-Trubar 的软件包，并自定义背景颜色、文本、文本颜色、接缝颜色和交通灯位置。

首先安装它：

npm install electron-trubar

然后这样使用（设置红绿灯位置）：

const TruBar = require("electron-trubar");

TruBar(mainWindow, {
  trafficLightX: 6.5,
  trafficLightY: 6.5
});

如果您想要透明的窗框，但还想要交通灯按钮，请在设置 TruBar 时将“backgroundColor”属性设置为“透明”。

确保在

初始化后

使用TruBar()功能。

注意，您不需要这个包来执行此操作。这只是自定义窗口任务栏的一种更简单的方法。

Electron 有一个内置函数专门用于执行此操作：

mainWindow.setTrafficLightPosition({ x: 6.5, y: 6.5 });