Electron macOS开发：无边框窗口如何保留原生红绿灯按钮？

直接上解决方案，Electron其实内置了对应的配置组合，只需把几个参数搭配起来就能实现VS Code的效果：

• 用frame: false开启无边框模式，同时通过titleBarStyle指定保留原生红绿灯的样式
• 想要和VS Code一致的缩进式红绿灯，使用titleBarStyle: 'hiddenInset'；如果需要红绿灯紧贴窗口边缘，用titleBarStyle: 'hidden'

主进程配置示例 #

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createMainWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    // 开启无边框
    frame: false,
    // 启用缩进式原生红绿灯（VS Code同款样式）
    titleBarStyle: 'hiddenInset',
    // 自定义红绿灯位置（可选，匹配VS Code的偏移量）
    trafficLightPosition: { x: 16, y: 16 },
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createMainWindow);

处理窗口拖拽 #

无边框窗口默认无法拖拽，需要给顶部可拖拽区域添加CSS样式：

/* 顶部标题栏区域 */
.title-bar {
  height: 48px;
  background: #1e1e1e;
  /* 允许该区域拖拽窗口 */
  -webkit-app-region: drag;
  /* 给红绿灯留出位置，避免内容被遮挡 */
  padding-left: 80px;
  display: flex;
  align-items: center;
  color: #fff;
}

/* 如果有自定义按钮，需禁用拖拽，防止点击失效 */
.title-bar .custom-btn {
  -webkit-app-region: no-drag;
}

补充说明 #

• titleBarStyle: 'hiddenInset'是VS Code采用的样式，红绿灯会向窗口内缩进一段距离，视觉上更协调
• trafficLightPosition可以精确调整红绿灯的坐标，可根据你的窗口布局微调
• 这些属性在Electron v10及以上版本都支持，若使用旧版本建议升级到稳定版

内容的提问来源于stack exchange，提问作者geeshane