如何在电子应用程序中恢复默认窗口大小？

Question

有没有办法将电子应用程序中的主窗口恢复到一定大小？为了解释我想要完成的工作，让我举个例子：

当我打开 Windows 资源管理器时，它会以特定大小和特定位置打开。然后我最大化该窗口并关闭资源管理器。下次我重新启动资源管理器时，它会以与我关闭时相同的状态打开，即处于最大化状态。但是，当我单击恢复按钮时，资源管理器会恢复到最大化之前的宽度/高度和位置。

我也想在我的电子应用程序中完成同样的工作。然而这并没有发生。

我正在做的是当我的应用程序关闭时，我使用 (win.getBounds()) 捕获应用程序窗口的尺寸（宽度、高度）和位置（x、y 坐标）并使用 @987654323 将它们保存在配置文件中@。这是我的代码的样子：

  const Config = require('electron-config')
  const config = new Config();

  mainWindow.on('close', () => {
    config.set('winBounds', mainWindow.getBounds())
  });

现在，当我启动应用程序时，我从配置文件中读取了设置（实际上 electron-config 为我做的）并使用它来设置窗口的初始尺寸/位置。我正在使用如下代码：

  let opts = {
    show: false,
    icon: path.join(__dirname, 'app-window-icon.png')
  };
  Object.assign(opts, config.get('winBounds'));
  mainWindow = new BrowserWindow(opts);

这也很好用。但是我现在得到的唯一选择是最大化窗口。我找不到任何选项来将窗口恢复到最大化之前的大小。

例如，假设用户启动了尺寸为 1024x768 像素的应用程序。用户然后最大化应用程序窗口，然后将其关闭。当用户重新启动应用程序时，它会以关闭时的大小打开，我看到的唯一选项是最大化窗口。我正在寻找的是将窗口大小恢复为 1024x768px 的选项。

我在这里查阅了文档：https://github.com/electron/electron/blob/master/docs/api/browser-window.md，但很遗憾在那里找不到任何东西。

Answer 1

我使用了solution here，它涉及将您的窗口大小和位置保持在electron-settings 中，并且效果很好。

在您的代码中包含windowStateKeeper 函数，然后如下调整您的createMainWindow 函数：

function createMainWindow() {
    const mainWindowStateKeeper = windowStateKeeper('main');
    const win = new electron.BrowserWindow({
        title: 'main',
        x: mainWindowStateKeeper.x,
        y: mainWindowStateKeeper.y,
        width: mainWindowStateKeeper.width,
        height: mainWindowStateKeeper.height
    });
    mainWindowStateKeeper.track(win);

    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', onClosed);

    return win;
}

Answer 2

这里是完整的解决方案：

stateKeeper.ts：

import {screen} from 'electron';
import settings from 'electron-settings';

export const windowStateKeeper = async (windowName) => {
    let window, windowState;

    const setBounds = async () => {
        // Restore from appConfig
        if (await settings.has(`windowState.${windowName}`)) {
            windowState = await settings.get(`windowState.${windowName}`);
            return;
        }

        const size = screen.getPrimaryDisplay().workAreaSize;

        // Default
        windowState = {
            x: undefined,
            y: undefined,
            width: size.width / 2,
            height: size.height / 2,
        };
    };

    const saveState = async () => {
        // bug: lots of save state events are called. they should be debounced
        if (!windowState.isMaximized) {
            windowState = window.getBounds();
        }
        windowState.isMaximized = window.isMaximized();
        await settings.set(`windowState.${windowName}`, windowState);
    };

    const track = async (win) => {
        window = win;
        ['resize', 'move', 'close'].forEach((event) => {
            win.on(event, saveState);
        });
    };

    await setBounds();

    return {
        x: windowState.x,
        y: windowState.y,
        width: windowState.width,
        height: windowState.height,
        isMaximized: windowState.isMaximized,
        track,
    };
};

main.ts

import {windowStateKeeper} from './utils/windowStateKeeper';


const mainWindowStateKeeper = await windowStateKeeper('main');

    // Create the browser window.
    mainWin = new BrowserWindow({
        title: 'Desktop',
        x: mainWindowStateKeeper.x,
        y: mainWindowStateKeeper.y,
        width: mainWindowStateKeeper.width,
        height: mainWindowStateKeeper.height,
        webPreferences: {
            nodeIntegration: true,
            allowRunningInsecureContent: serve ? true : false,
            contextIsolation: false, // false if you want to run e2e test with Spectron
            enableRemoteModule: true, // true if you want to run e2e test with Spectron or use remote module in renderer context (ie. Angular)
        },
    });

    // Track window state
    mainWindowStateKeeper.track(mainWin);