通过拖动标题栏更改最大屏幕尺寸图标（和变量）

Question

在桌面应用程序（用 Electron 编写）中，我试图实现一项功能，允许用户全屏打开应用程序或将其返回到相反状态（最初应用程序不会全屏打开）。

我已经有了工作功能。

我做了什么：

main.ts

ipcMain.handle(IPCChannels.CheckMax, () => {
  let result = '';
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize();
    console.log('unmaximize');
    result = 'unmaximize';
    return result;
  }
  mainWindow.maximize();
  console.log('maximize');
  result = 'maximize';
  return result;
});

标题栏.tsx

function TitleBar() {
  const [checkMax, setCheckMax] = useState('');

  function maximize() {
    window.electron.ipcRenderer
      .invoke(IPCChannels.CheckMax)
      .then((res) => setCheckMaximize(res))
      .catch((err) => {
        console.error(err);
      });
  }

  return (
    <nav className="absolute top-0 flex  w-full ">
      <div className="region-drag absolute top-0 z-0" />

      <button onClick={maximize}>
        {checkMaximize === 'maximize' ? (
          <MaxIcon />
        ) : (
          <MinIcon />
        )}
      </button>
    </nav>
  );
}

也就是说，我们的代码会发生什么：我单击按钮更改屏幕尺寸，屏幕变为最大，图标发生变化。反之亦然，屏幕显示为以前的尺寸，并且图标再次发生变化。

但是，问题是 result 变量（以及相应的图标）仅在我单击按钮时才会更改。在所有应用程序中，您可以验证这一点，您可以通过拉动标题栏退出最大屏幕尺寸（尝试 Google Chrome 或任何浏览器或任何应用程序的示例）。 请告诉我如何更改 result 变量的值，包括当我拉动 TitleBar

时

Answer 1

您可以在

"maximize"

和

"unmaximize"

事件上添加窗口侦听器：

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

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

然后在渲染器上设置 IPC 侦听器以相应地更改按钮的状态，例如：

useEffect(() => {
  const maximize = () => setCheckMax("maximize"));
  window.electron.ipcRenderer.on("maximize", maximize);

  const unmaximize = () => setCheckMax("unmaximize");
  window.electron.ipcRenderer.on("unmaximize", unmaximize);

  return () => {
    window.electron.ipcRenderer.removeListener("maximize", maximize);
    window.electron.ipcRenderer.removeListener("unmaximize ", unmaximize);
  };
}, []);

我在示例中使用了您的代码，但请确保在使用 IPC 时遵循 安全指南。