Electron 中如何设置 BrowserWindow 的大小和位置？

推荐答案

在 Electron 中，可以通过 BrowserWindow 的构造函数或实例方法来设置窗口的大小和位置。以下是一个示例代码：

// www.javascriptcn.com code example
const { BrowserWindow } = require('electron');

// 创建窗口时设置大小和位置
const win = new BrowserWindow({
  width: 800, // 设置窗口宽度
  height: 600, // 设置窗口高度
  x: 100, // 设置窗口在屏幕上的水平位置
  y: 100, // 设置窗口在屏幕上的垂直位置
});

// 或者通过实例方法动态设置大小和位置
win.setSize(800, 600); // 设置窗口大小
win.setPosition(100, 100); // 设置窗口位置

本题详细解读

1. 设置窗口大小和位置的两种方式

在 Electron 中，设置 BrowserWindow 的大小和位置有两种主要方式：

• 通过构造函数设置：在创建 BrowserWindow 实例时，可以通过传递配置对象来设置窗口的初始大小和位置。配置对象中的 width 和 height 属性用于设置窗口的宽度和高度，x 和 y 属性用于设置窗口在屏幕上的位置。

• 通过实例方法设置：在 BrowserWindow 实例创建后，可以通过 setSize(width, height) 方法来动态调整窗口的大小，通过 setPosition(x, y) 方法来调整窗口的位置。

2. 参数说明

• width 和 height：这两个参数分别表示窗口的宽度和高度，单位为像素。它们决定了窗口的初始大小。

• x 和 y：这两个参数表示窗口在屏幕上的位置。x 是窗口左上角距离屏幕左边的距离，y 是窗口左上角距离屏幕顶部的距离，单位均为像素。

3. 注意事项

• 窗口位置：x 和 y 的值是相对于屏幕左上角的坐标。如果屏幕有多个显示器，坐标系统会跨越所有显示器。

• 窗口大小：width 和 height 设置的是窗口的内容区域大小，不包括窗口的边框和标题栏。如果需要包含这些部分，可以使用 win.getBounds() 方法获取完整的窗口尺寸。

• 动态调整：通过 setSize 和 setPosition 方法，可以在窗口创建后动态调整其大小和位置，这在需要根据用户操作或其他条件调整窗口时非常有用。

4. 示例代码

// www.javascriptcn.com code example
const { BrowserWindow } = require('electron');

// 创建窗口时设置大小和位置
const win = new BrowserWindow({
  width: 800,
  height: 600,
  x: 100,
  y: 100,
});

// 动态调整窗口大小和位置
win.setSize(1024, 768);
win.setPosition(200, 200);

在这个示例中，窗口初始大小为 800x600，位置在屏幕的 (100, 100) 处。随后，窗口大小被调整为 1024x768，位置被移动到 (200, 200) 处。