Electron应用：拖拽标题栏时同步窗口最大化状态图标方案咨询

问题根源在于：仅通过按钮点击触发IPC更新状态，用户手动拖拽标题栏改变窗口状态时，渲染进程无法感知主进程的窗口状态变化。以下是完整解决方案：

1. 主进程（main.ts）修改 #

保留原有按钮切换逻辑，新增窗口状态监听与主动推送：

// 原有按钮切换逻辑（优化写法）
ipcMain.handle(IPCChannels.CheckMax, () => {
  const isMaxed = mainWindow.isMaximized();
  isMaxed ? mainWindow.unmaximize() : mainWindow.maximize();
  const newState = isMaxed ? 'unmaximize' : 'maximize';
  // 推送状态到渲染进程
  mainWindow.webContents.send(IPCChannels.WindowMaxState, newState);
  return newState;
});

// 监听系统触发的窗口最大化/还原事件
mainWindow.on('maximize', () => {
  mainWindow.webContents.send(IPCChannels.WindowMaxState, 'maximize');
});

mainWindow.on('unmaximize', () => {
  mainWindow.webContents.send(IPCChannels.WindowMaxState, 'unmaximize');
});

// 窗口初始化时同步一次当前状态
mainWindow.on('ready-to-show', () => {
  const initialState = mainWindow.isMaximized() ? 'maximize' : 'unmaximize';
  mainWindow.webContents.send(IPCChannels.WindowMaxState, initialState);
});

// 新增获取当前状态的IPC接口（用于渲染进程初始化）
ipcMain.handle(IPCChannels.CheckMaxState, () => {
  return mainWindow.isMaximized() ? 'maximize' : 'unmaximize';
});

2. 渲染进程（TitleBar.tsx）修改 #

添加IPC状态监听，优化初始化逻辑：

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    // 初始化时获取当前窗口状态
    window.electron.ipcRenderer.invoke(IPCChannels.CheckMaxState)
      .then(initialState => setCheckMax(initialState))
      .catch(err => console.error(err));

    // 监听主进程推送的状态变化
    const handleStateUpdate = (_, state) => setCheckMax(state);
    window.electron.ipcRenderer.on(IPCChannels.WindowMaxState, handleStateUpdate);

    // 组件卸载时清理监听
    return () => {
      window.electron.ipcRenderer.removeListener(IPCChannels.WindowMaxState, handleStateUpdate);
    };
  }, []);

  const toggleMaximize = () => {
    window.electron.ipcRenderer.invoke(IPCChannels.CheckMax)
      .catch(err => console.error(err));
  };

  return (
    <nav>
      <div />
      <button onClick={toggleMaximize}>
        {checkMax === 'maximize' ? <MaxIcon /> : <MinIcon />}
      </button>
    </nav>
  );
}

3. 补充IPC通道定义 #

在共享的枚举文件中添加新通道：

enum IPCChannels {
  CheckMax = 'check-max',
  CheckMaxState = 'check-max-state',
  WindowMaxState = 'window-max-state'
}

修改后，无论用户通过按钮切换还是拖拽标题栏改变窗口状态，渲染进程都会实时同步状态与图标。

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