在electron-egg项目中动态调整窗口尺寸的最佳实践

在electron-egg项目中动态调整窗口尺寸的最佳实践

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/dromara/electron-egg

背景介绍

electron-egg是一个基于Electron的框架，开发者在使用过程中经常需要根据用户屏幕尺寸动态调整应用窗口大小。本文探讨如何在electron-egg项目中实现这一功能。

核心问题分析

在electron-egg项目中，开发者希望在config.default.js配置文件中获取屏幕信息(screen)来按比例设置窗口宽高。然而，直接在配置文件中获取屏幕信息存在技术限制，因为配置文件是静态的，而屏幕信息是动态的。

解决方案

1. 生命周期中处理窗口尺寸

推荐在electron的生命周期中处理窗口尺寸调整，这是最符合Electron应用架构的做法：

// 在electron/index.js中
app.whenReady().then(() => {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  const barHeight = screen.getPrimaryDisplay().workArea.y;
  
  // 计算新尺寸
  const newWidth = Math.round(width * (4 / 5));
  const newHeight = Math.round(newWidth * (9 / 16)) + barHeight;
  
  // 获取主窗口并设置尺寸
  const mainWindow = electronEgg.getMainWindow();
  mainWindow.setBounds({
    width: newWidth,
    height: newHeight,
    x: Math.round((width - newWidth) / 2),
    y: Math.round((height - newHeight) / 2)
  });
  
  // 显示窗口
  mainWindow.show();
});

2. 预加载脚本中处理

另一种方法是在预加载脚本(preload/index.js)中处理：

// preload/index.js
const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.invoke('adjust-window-size').then((bounds) => {
    // 可以在这里处理窗口尺寸变化后的逻辑
  });
});

然后在主进程中实现对应的处理逻辑。

实现细节

1. 初始隐藏窗口：在config.default.js中设置show: false，等计算完尺寸后再显示窗口

2. 屏幕信息获取：使用screen.getPrimaryDisplay()获取主显示器信息

3. 比例计算：按照16:9的比例计算窗口高度，同时考虑任务栏高度

4. 居中显示：计算窗口位置使其居中显示

最佳实践建议

1. 响应式设计：考虑监听屏幕尺寸变化事件，在用户调整显示器分辨率或连接新显示器时自动调整

2. 边界处理：添加对最小尺寸的限制，防止窗口过小

3. 多显示器支持：考虑在多显示器环境下的窗口位置处理

4. 配置覆盖：允许用户通过配置文件覆盖默认的尺寸计算逻辑

总结

在electron-egg项目中动态调整窗口尺寸，最佳实践是在应用生命周期或预加载脚本中处理，而不是在静态配置文件中。这种方法既保持了配置的灵活性，又能根据实际屏幕环境动态计算窗口尺寸，提供更好的用户体验。

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/dromara/electron-egg