Mac平台Electron中如何保持BrowserWindow显示时菜单栏不自动隐藏？

在Mac平台Electron开发中，点击Tray图标打开自定义BrowserWindow后，常会遇到光标离开菜单栏后菜单栏自动隐藏，但窗口仍显示的问题。而使用系统上下文菜单时菜单栏能正常保持可见，这是因为系统菜单是Electron与Mac原生集成的，会自动处理应用激活状态；自定义窗口则需要手动控制菜单栏的显示逻辑。

核心解决方案思路 #

通过控制应用激活状态、监听窗口事件，确保BrowserWindow显示期间菜单栏始终可见：

• 窗口显示/获得焦点时，激活应用并保持菜单栏可见
• 窗口隐藏/失焦时，恢复应用的正常后台行为，让菜单栏自动隐藏

完整代码示例 #

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

let tray = null;
let mainWindow = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 300,
    height: 400,
    frame: false, // 按需开启自定义窗口边框
    alwaysOnTop: true, // 保持窗口在最前，模拟系统菜单行为
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 按需配置预加载脚本
    }
  });

  mainWindow.loadFile('index.html'); // 加载自定义HTML内容

  // 窗口隐藏时，恢复系统默认菜单栏行为
  mainWindow.on('hide', () => {
    app.dock.show();
    app.hide(); // 让应用进入后台，触发菜单栏自动隐藏
  });

  // 窗口获得焦点时，强制激活应用并显示菜单栏
  mainWindow.on('focus', () => {
    app.dock.hide(); // 隐藏Dock图标，避免干扰
    app.activate(); // 激活应用，强制显示菜单栏
  });
}

app.whenReady().then(() => {
  // 初始化Tray图标
  tray = new Tray(path.join(__dirname, 'tray-icon.png'));

  // Tray点击事件：切换窗口显示/隐藏
  tray.on('click', () => {
    if (mainWindow?.isVisible()) {
      mainWindow.hide();
    } else {
      mainWindow ?? createWindow();
      mainWindow.show();
      mainWindow.focus(); // 确保窗口获得焦点，触发聚焦逻辑
      app.activate();
    }
  });

  // 可选：保留右键上下文菜单（与原有逻辑兼容）
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' },
    { label: '退出', role: 'quit' }
  ]);
  tray.setContextMenu(contextMenu);
});

// 处理应用退出逻辑
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

关键细节说明 #

1. app.activate()：Mac平台专属API，调用后会激活应用并强制显示菜单栏，即使光标不在菜单栏区域。
2. app.dock.hide()：隐藏Dock图标，避免应用在前台显示时Dock干扰菜单栏的显示逻辑。
3. 窗口事件监听：通过focus和hide事件精准控制菜单栏状态，确保窗口显示期间菜单栏持续可见。
4. alwaysOnTop: true：让自定义窗口保持在最上层，和系统Tray上下文菜单的行为一致。

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