Electron：如何检测窗口是否最大化以更改最大化图标

Question

我用 Electron 制作了一个自定义标题栏，其中的图标直接取自 Windows UI 工具包。

如何在另一个脚本而不是主脚本中检测窗口何时最大化，无论是双击标题栏还是将其拖动到屏幕顶部。我需要在最大化时将最大化图标更改为“恢复”图标。

我知道这个方法：

mainWindow.on('maximize', () => {
    // do something
})

但是我只能修改前端JS文件中的HTML，不能修改主文件。

Answer 1

如果您创建了自定义标题栏，则必须使用 IPC 作为更新窗口的按钮。为了从 main 更改 HTML，您还必须在这里使用它：

主要

mainWindow.on("maximize", () => {
  mainWindow.webContents.send("maximize");
});

（您可能也想听

unmaximize

活动。）

预加载

contextBridge.exposeInMainWorld('electronAPI', {
  onMaximize: (callback) => (
    ipcRenderer.on("maximize", () => callback())
  )
});

渲染器

window.electronAPI.onMaximize(() => {
  // Do something with your HTML
});

---

顺便说一句，如果您希望应用程序在午餐时保持最大化状态，则需要在关闭前存储状态（例如使用

electron-store

等工具），并让渲染器检查状态加载时窗口的外观：

主要

app.whenReady().then(() => {
  mainWindow.handle("isMaximized", () => mainWindow.isMaximized());
})

mainWindow.once("ready-to-show", () => {
  if (store.get("isMaximized")) mainWindow.maximize();
});

mainWindow.on("close", (event) => {
  store.set("isMaximized", mainWindow.isMaximized());
});

预加载

contextBridge.exposeInMainWorld('electronAPI', {
  isMaximized: () => ipcRenderer.invoke("isMaximized")
});

渲染器

await window.electronAPI.isMaximized((isMax) => {
  // Do something with your HTML
});