Question

是否可以将电子应用程序中的主窗口恢复到特定大小？为了说明我要完成的工作，让我举一个例子：

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

我也想在电子应用中实现同样的目的。但是那没有发生。

我正在做的是，当我的应用程序关闭时，我使用（win.getBounds()）捕获应用程序窗口的尺寸（宽度，高度）和位置（x，y坐标），然后使用以下命令将其保存在配置文件中electron-config。这是我的代码：

  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 px尺寸启动应用程序。然后，用户将应用程序窗口最大化，然后将其关闭。当用户重新启动应用程序时，它会以关闭时的大小打开，我看到的唯一选择是最大化窗口。我正在寻找的是将窗口大小恢复为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);

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

2 个答案: