自定义窗口

BrowserWindow 模块是您的 Electron 应用程序的基础。 并且它暴露了许多可以改变您浏览器窗口的外观和行为的API。 在本教程中，我们将介绍在macOS，Windows和Linux上自定义窗口的各种用例。

创建无边框窗口

无边框窗口是没有 chrome 的窗口。 不要与 Google Chrome 浏览器混淆，窗口的 chrome 是指窗口的某些部分（例如工具栏、控件等），它们不是网页的一部分。

要创建无边框窗口，需在 BrowserWindow 的构造中将 frame 参数设置为 false：

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({ frame: false })

应用自定义标题栏样式 macOS Windows

标题栏样式允许隐藏浏览器窗口的大部分色彩，同时保持系统原生窗口控件完整无损，并可以在 BrowserWindow 的构造器中使用 titleBarStyle 选项来配置。

应用 hidden 标题栏样式的结果是隐藏标题栏和全尺寸内容窗口。

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({ titleBarStyle: 'hidden' })

Control the traffic lights macOS

On macOS, applying the hidden title bar style will still expose the standard window controls (“traffic lights”) in the top left.

Customize the look of your traffic lights macOS

The customButtonsOnHover title bar style will hide the traffic lights until you hover over them. This is useful if you want to create custom traffic lights in your HTML but still use the native UI to control the window.

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })

Customize the traffic light position macOS

To modify the position of the traffic light window controls, there are two configuration options available.

Applying hiddenInset title bar style will shift the vertical inset of the traffic lights by a fixed amount.

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })

If you need more granular control over the positioning of the traffic lights, you can pass a set of coordinates to the trafficLightPosition option in the BrowserWindow constructor.

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({
  3.   titleBarStyle: 'hidden',
  4.   trafficLightPosition: { x: 10, y: 10 }
  5. })

Show and hide the traffic lights programmatically macOS

You can also show and hide the traffic lights programmatically from the main process. The win.setWindowButtonVisibility forces traffic lights to be show or hidden depending on the value of its boolean parameter.

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow()
  3. // hides the traffic lights
  4. win.setWindowButtonVisibility(false)

Note: Given the number of APIs available, there are many ways of achieving this. For instance, combining frame: false with win.setWindowButtonVisibility(true) will yield the same layout outcome as setting titleBarStyle: 'hidden'.

Window Controls Overlay macOS Windows

The Window Controls Overlay API is a web standard that gives web apps the ability to customize their title bar region when installed on desktop. Electron exposes this API through the BrowserWindow constructor option titleBarOverlay.

This option only works whenever a custom titlebarStyle is applied on macOS or Windows. When titleBarOverlay is enabled, the window controls become exposed in their default position, and DOM elements cannot use the area underneath this region.

The titleBarOverlay option accepts two different value formats.

Specifying true on either platform will result in an overlay region with default system colors:

main.js

  1. // on macOS or Windows
  2. const { BrowserWindow } = require('electron')
  3. const win = new BrowserWindow({
  4.   titleBarStyle: 'hidden',
  5.   titleBarOverlay: true
  6. })

On either platform titleBarOverlay can also be an object. On both macOS and Windows, the height of the overlay can be specified with the height property. On Windows, the color of the overlay and its symbols can be specified using the color and symbolColor properties respectively.

If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:

main.js

  1. // on Windows
  2. const { BrowserWindow } = require('electron')
  3. const win = new BrowserWindow({
  4.   titleBarStyle: 'hidden',
  5.   titleBarOverlay: {
  6.     color: '#2f3241',
  7.     symbolColor: '#74b1be',
  8.     height: 60
  9.   }
  10. })

Note: Once your title bar overlay is enabled from the main process, you can access the overlay’s color and dimension values from a renderer using a set of readonly JavaScript APIs and CSS Environment Variables.

局限性

  • Transparent colors are currently not supported. Progress updates for this feature can be found in PR #33567.

创建透明窗口

通过设置 transparent 选项为 true，您可以创建一个完全透明的窗口。

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow({ transparent: true })

局限性

  • 你不能点击穿透透明区域。 详情可见: #1335。
  • 透明窗口不可调整大小。 在某些平台上，将 resizable 设置为 true 可能会使透明窗口停止工作。
  • The CSS blur()) filter only applies to the window’s web contents, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user’s system).
  • 当打开开发者工具时，窗口将不透明。
  • 在 Windows 上：
    • 当DWM禁用时，透明窗口将失效。
    • 透明窗口不能通过Windows系统菜单或双击标题栏实现最大化。 其背后的原因可以在 #28207 这里看到
  • 在 macOS 上：
    • 在 Mac 上, 原生窗口阴影不会显示在透明窗口中。

创建点击穿透窗口

要创建一个点击穿透窗口，也就是使窗口忽略所有鼠标事件，可以调用 win.setIgnoreMouseEvents(ignore) API：

main.js

  1. const { BrowserWindow } = require('electron')
  2. const win = new BrowserWindow()
  3. win.setIgnoreMouseEvents(true)

在 macOS Windows 平台上转发鼠标事件

忽略鼠标消息会使网页内容无视鼠标移动，这意味着鼠标移动事件不会被发出。 在 Windows 操作系统上，可以使用可选参数将鼠标移动消息转发到网页，从而允许发出诸如 mouseleave 之类的事件：

main.js

  1. const { BrowserWindow, ipcMain } = require('electron')
  2. const path = require('path')
  4. const win = new BrowserWindow({
  5.   webPreferences: {
  6.     preload: path.join(__dirname, 'preload.js')
  7.   }
  8. })
  10. ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
  11.   const win = BrowserWindow.fromWebContents(event.sender)
  12.   win.setIgnoreMouseEvents(...args)
  13. })

preload.js

  1. window.addEventListener('DOMContentLoaded', () => {
  2.   const el = document.getElementById('clickThroughElement')
  3.   el.addEventListener('mouseenter', () => {
  4.     ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
  5.   })
  6.   el.addEventListener('mouseleave', () => {
  7.     ipcRenderer.send('set-ignore-mouse-events', false)
  8.   })
  9. })

这将使网页在 #clickThroughElement 上点击时穿透，在它外面时恢复正常。

设置自定义可拖动区域

默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。

要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:

styles.css

  1. body {
  2.   -webkit-app-region: drag;
  3. }

请注意，如果您使整个窗口都可拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击它们：

styles.css

  1. button {
  2.   -webkit-app-region: no-drag;
  3. }

如果只将自定义标题栏设置为可拖拽，还需要使标题栏中的所有按钮都不可拖拽。

提示：禁用文本选择

创建可拖拽区域时，拖拽行为可能与文本选择相冲突。 例如，当您拖动标题栏时，您可能不小心选中其中的文本。 为了避免这种情况，您需要在可拖拽区域中禁用文本选择，像这样：

  1. .titlebar {
  2.   -webkit-user-select: none;
  3.   -webkit-app-region: drag;
  4. }

提示：禁用上下文菜单

在某些平台上, 可拖拽区域将被视为non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。