如何在自定义最大化按钮悬停时触发Windows 11 Snap布局？

完全可以实现，不需要依赖原生标题栏，用Electron提供的API就能调用系统级的Snap布局功能，下面是具体实现方案：

• 绑定自定义按钮事件
  先给你的自定义最大化按钮绑定点击/长按事件，在回调中调用对应API实现功能。

• 唤起系统窗口菜单（含完整Snap布局）
  使用Electron的BrowserWindow.showWindowMenu()方法，直接唤起Windows系统的窗口菜单，里面包含所有Snap布局选项。该方法从Electron 14版本开始支持，仅在Windows系统生效。
  代码示例：

  // 渲染进程：绑定按钮点击事件
  document.querySelector('.custom-max-btn').addEventListener('click', () => {
    window.electronAPI.showWindowMenu();
  });
  
  // 预加载脚本（preload.js）：暴露API到渲染进程
  const { contextBridge, ipcRenderer } = require('electron');
  contextBridge.exposeInMainWorld('electronAPI', {
    showWindowMenu: () => ipcRenderer.send('show-window-menu')
  });
  
  // 主进程（main.js）：处理IPC调用
  const { ipcMain } = require('electron');
  ipcMain.on('show-window-menu', () => {
    mainWindow.showWindowMenu(); // mainWindow为你的窗口实例
  });
  

• 直接触发特定Snap布局（可选）
  如果想跳过菜单直接触发某个具体布局（比如左半屏、全屏），可以通过计算屏幕尺寸，调用BrowserWindow.setBounds()实现：

  // 主进程：实现左半屏Snap布局
  const { screen } = require('electron');
  ipcMain.on('trigger-snap-left', () => {
    const display = screen.getPrimaryDisplay();
    const { width, height } = display.workAreaSize;
    mainWindow.setBounds({
      x: 0,
      y: 0,
      width: Math.floor(width / 2),
      height: height
    });
  });
  

• 模拟原生长按触发Snap网格
  Windows 11原生最大化按钮长按会直接弹出Snap布局网格，你可以给自定义按钮添加长按逻辑，贴近原生体验：

  // 渲染进程：长按逻辑
  let pressTimer;
  const maxBtn = document.querySelector('.custom-max-btn');
  maxBtn.addEventListener('mousedown', () => {
    pressTimer = setTimeout(() => {
      window.electronAPI.showWindowMenu();
    }, 500); // 长按500ms触发
  });
  
  maxBtn.addEventListener('mouseup', () => {
    clearTimeout(pressTimer);
    // 短按切换最大化/还原状态
    window.electronAPI.toggleMaximize();
  });
  
  // 主进程：处理最大化切换
  ipcMain.on('toggle-maximize', () => {
    mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize();
  });
  

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