Electron中如何实现窗口最大化的还原功能？

核心结论 #

Electron自带的BrowserWindow.restore()方法可以直接还原窗口到最大化前的状态，不需要手动存储窗口尺寸。你的还原功能失效，本质是渲染进程维护的isMaximized状态与窗口实际状态不同步，导致按钮触发逻辑错误。

问题根源 #

你通过点击按钮时手动设置isMaximized状态，但这个状态没有和Electron窗口的真实状态绑定：

• 若用户通过系统标题栏手动最大化/还原窗口，渲染进程的isMaximized不会自动更新
• 调用maximize()/restore()后，窗口状态变更可能存在异步延迟，手动设置状态会导致判断偏差

修复步骤 #

1. 主进程同步窗口状态到渲染进程

在窗口创建代码中，监听窗口的maximize/unmaximize事件，主动将真实状态发送给渲染进程：

// 假设你的窗口实例为mainWindow
mainWindow.on('maximize', () => {
  mainWindow.webContents.send('window-status-update', true);
});

mainWindow.on('unmaximize', () => {
  mainWindow.webContents.send('window-status-update', false);
});

// 窗口加载完成后，主动发送初始状态
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.send('window-status-update', mainWindow.isMaximized());
});

同时修改主进程的IPC监听，直接使用窗口实例而非getFocusedWindow()（避免多窗口场景下获取错误窗口）：

ipcMain.on("maximize-window", () => {
  if (mainWindow) mainWindow.maximize();
});

ipcMain.on("unmaximize-window", () => {
  if (mainWindow) mainWindow.restore();
});

2. 预加载脚本添加状态监听方法

扩展预加载脚本，让渲染进程可以监听主进程的状态推送：

contextBridge.exposeInMainWorld('electron', {
  maximizeWindow: () => ipcRenderer.send('maximize-window'),
  unmaximizeWindow: () => ipcRenderer.send('unmaximize-window'),
  onWindowStatusChange: (callback) => ipcRenderer.on('window-status-update', (_, isMax) => callback(isMax))
});

3. 渲染进程同步真实状态

修改渲染进程代码，通过主进程的推送更新状态，不再手动设置：

const [isMaximized, setIsMaximized] = useState(false);

useEffect(() => {
  // 监听主进程的状态变更
  const handleStatusChange = (isMax) => {
    setIsMaximized(isMax);
  };

  window.electron.onWindowStatusChange(handleStatusChange);

  // 组件卸载时清理监听
  return () => {
    ipcRenderer.removeListener('window-status-update', handleStatusChange);
  };
}, []);

const handleToggleMaximize = () => {
  isMaximized ? window.electron.unmaximizeWindow() : window.electron.maximizeWindow();
};

4. 按钮逻辑简化

按钮直接调用切换方法，并根据真实状态切换图标：

<button
  onClick={handleToggleMaximize}
  className="w-5 h-5 cursor-pointer flex items-center justify-center no-drag"
>
  {isMaximized ? <FaWindowRestore className="h-3 w-3 text-black" /> : <FaRegSquare className="h-3 w-3 text-black" />}
</button>

额外说明 #

Electron会自动维护窗口最大化前的位置和尺寸，restore()方法会直接复用这些数据，完全不需要手动存储。只有当你需要自定义还原后的窗口尺寸时，才需要提前记录窗口的getBounds()数据。

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