窗口

几乎所有包含图形界面的操作系统都是以窗口为基础构建各自的用户界面的。系统内小到一个计算器，大到一个复杂的业务系统，都是基于窗口而创建的。如果开发人员要开发一个有良好用户体验的 GUI 应用，势必会在窗口的控制上下足功夫。

Electron 中的窗口由 BrowserWindow 对象来创建，可以配置的属性多达几十个，这里我们将介绍一些比较常用的属性，以及一些比较常见的需求。

主要包含以下内容：

• 窗口相关配置
• 组合窗口
• 窗口的层级

窗口相关配置

这一块儿基本上都是传递给 BrowserWindow 的配置项。

基础属性

• maxWidth：设置窗口的最大宽度
• minWidth：设置窗口的最小宽度
• maxHeight：设置窗口的最大高度
• minHeight：设置窗口的最小高度
• resizeable：是否可以改变大小，当设置 resizeable 为 false 之后，代表不可缩放，前面所设置的 maxWidth ... 这些就没有意义了
• moveable：是否可以移动

窗口位置

默认窗口出现在屏幕的位置是在正中间，但是我们可以通过 x、y 属性来控制窗口出现在屏幕的位置

• x：控制窗口在屏幕的横向坐标
• y：控制窗口在屏幕的纵向坐标

标题栏文本和图标

关于窗口的标题栏，实际上是可以在多个地方设置的。

既然可以在多个地方进行设置，那么这里自然会涉及到一个优先级的问题。优先级从高到低依次：

• HTML文档的 title
• BrowserWindow 里面的 title 属性
• package.json 里面的 name
• Electron 默认值：Electron

除了标题栏文本，我们还可以设置对应的图标：

• icon：设置标题栏的图标，一般来讲是 ico 格式

// 创建窗口方法
const createWindow = () => {
  const win = new BrowserWindow({
    // ...
    icon: path.join(__dirname, "logo.ico"),
  });

  win.loadFile("window/index.html");
};

标题栏、菜单栏和边框

默认我们所创建的窗口，是有标题栏、菜单栏以及边框的，不过这个也是能够控制的。通过 frame 配置项来决定是否要显示。

• frame：true/false 默认值是 true

组合窗口

桌面应用有些时候是有多个窗口的，多个窗口彼此之间是相互独立，也就是说，假设我关闭了一个窗口，对另外一个窗口是没有影响的。

但是在有一些场景中，多个窗口之间存在一定程度的联动，例如两个窗口存在父窗口和子窗口之间的关系，父窗口关闭之后，子窗口也一并被关闭掉了。

在 Electron 中，类似这样的需求可以非常简单的被实现，Electron 提供了父子窗口的概念，通过 parent 来指定一个窗口的父窗口。

当窗口之间形成了父子关系之后，两个窗口在行为上就会有一定的联系：

• 子窗口可以相对于父窗口的位置来定位
• 父窗口在移动的时候，子窗口也跟着移动
• 父窗口关闭了，子窗口也应该一并被关闭掉
• .....

窗口的层级

当我们创建多个窗口的时候，默认情况下最后面创建的窗口，就在越上层。但是如果两个窗口是独立的话，那么当用户点击对应的窗口的时候，被点击的窗口会处于最上层。

但是在某些场景下，我们就是需要置顶某一些窗口，有两种方式可以办到：

• alwaysOnTop：true/false
  • 该配置属性虽然也能够置顶窗口，但是没有办法进行更新细粒度的设置
• window.setAlwaysOnTop(flag, level, relativeLevel)：该方法可以进行一个更细粒度的控制
  • flag：一个布尔值，用于设置窗口是否始终位于顶部。如果为 true，窗口将始终保持在最前面；如果为 false，则取消这一设置
  • level（可选）：一个字符串，指定窗口相对于其他窗口的层次。常用的值包括 'normal', 'floating', 'torn-off-menu', 'modal-panel', 'main-menu', 'status', 'pop-up-menu', 'screen-saver' 等。这个参数在不同的操作系统上可能会有不同的行为。
  • relativeLevel（可选）：一个整数，用于在设置了 level 的情况下进一步微调窗口层次。