electron-window-state：如何让你的Electron应用记住窗口大小与位置？

electron-window-state：如何让你的Electron应用记住窗口大小与位置？

【免费下载链接】electron-window-stateA library to store and restore window sizes and positions for your Electron app项目地址: https://gitcode.com/gh_mirrors/el/electron-window-state

electron-window-state是一个轻量级库，专门用于帮助Electron应用存储和恢复窗口的大小与位置。对于开发者来说，它解决了用户每次打开应用都需要重新调整窗口的痛点，提升了应用的用户体验。

为什么需要electron-window-state？

想象一下，当用户关闭你的Electron应用后再次打开时，窗口能够自动恢复到上次关闭时的大小和位置，这种无缝的体验无疑会让用户感到愉悦。electron-window-state正是为实现这一功能而生，它能够：

• 自动保存窗口的位置（x、y坐标）
• 记录窗口的尺寸（宽度、高度）
• 记住窗口的最大化和全屏状态
• 提供简单易用的API，只需几行代码即可集成

快速开始：安装与基本使用

一键安装步骤

使用npm或yarn可以轻松安装electron-window-state：

npm install --save electron-window-state

最快配置方法

在你的Electron应用主进程中，只需添加以下代码即可实现窗口状态的保存与恢复：

const windowStateKeeper = require('electron-window-state'); let win; app.on('ready', function () { // 加载之前的窗口状态，若无则使用默认值 let mainWindowState = windowStateKeeper({ defaultWidth: 1000, defaultHeight: 800 }); // 使用状态信息创建窗口 win = new BrowserWindow({ 'x': mainWindowState.x, 'y': mainWindowState.y, 'width': mainWindowState.width, 'height': mainWindowState.height }); // 让windowStateKeeper管理窗口状态 mainWindowState.manage(win); });

核心功能解析

窗口状态对象

windowStateKeeper函数返回一个状态对象，包含以下属性：

• x和y：窗口的位置坐标
• width和height：窗口的尺寸
• isMaximized：窗口是否最大化
• isFullScreen：窗口是否全屏

自动管理窗口状态

通过调用manage(win)方法，electron-window-state会自动监听窗口的resize和move事件，在窗口关闭时保存状态。这个方法是整个库的核心，它简化了状态管理的大部分工作。

自定义配置选项

你可以通过传递配置对象来自定义electron-window-state的行为：

let mainWindowState = windowStateKeeper({ defaultWidth: 1000, // 默认宽度 defaultHeight: 800, // 默认高度 path: app.getPath('userData'), // 状态文件保存路径 file: 'main-window-state.json', // 状态文件名 maximize: true, // 是否自动恢复最大化状态 fullScreen: true // 是否自动恢复全屏状态 });

高级用法与注意事项

多窗口支持

如果你需要支持多个窗口，只需为每个窗口创建不同的状态文件：

// 主窗口状态 const mainWindowState = windowStateKeeper({ file: 'main-window-state.json' }); // 次要窗口状态 const secondaryWindowState = windowStateKeeper({ file: 'secondary-window-state.json' });

避免常见陷阱

使用electron-window-state时，请注意以下几点：

1. 不要在ready事件触发前调用windowStateKeeper
2. 创建BrowserWindow时不要设置useContentSize: true，这会影响窗口大小的计算
3. 如果需要手动管理状态，可以使用saveState(win)方法

状态文件位置

默认情况下，状态文件保存在Electron应用的userData目录下，文件名为window-state.json。你可以通过path和file选项自定义这些设置。

总结

electron-window-state是一个简单而强大的库，它为Electron应用提供了窗口状态管理的完整解决方案。通过本文介绍的方法，你可以轻松地为你的应用添加窗口状态记忆功能，提升用户体验。

无论是开发简单的工具应用还是复杂的桌面软件，electron-window-state都能帮助你处理窗口状态的保存与恢复，让你可以专注于应用的核心功能开发。

如果你想深入了解更多细节，可以查看项目的源代码文件：

• 主逻辑实现：index.js
• 类型定义：index.d.ts
• 测试用例：test.js

要开始使用electron-window-state，只需克隆仓库并按照文档集成到你的项目中：

git clone https://gitcode.com/gh_mirrors/el/electron-window-state

希望这篇文章能帮助你更好地理解和使用electron-window-state，为你的Electron应用增添更专业的用户体验！

【免费下载链接】electron-window-stateA library to store and restore window sizes and positions for your Electron app项目地址: https://gitcode.com/gh_mirrors/el/electron-window-state