electron 自定义标题栏_如何在Electron Framework中创建自定义标题栏(灵感来自Visual Studio Code标题栏)...

本文概述

在大多数使用自定义标题栏的桌面应用程序中, 它们通常不使用Windows, Mac或Linux的默认图形工具包, 因为通常无法通过单个应用程序对其进行自定义。因此, 对于这类需要对其进行自定义的应用程序, 最常见的解决方案是从根本上复制带有其自己的GUI组件的标题栏的行为, 删除原始标题栏并使用无框架的窗口。对于Electron应用程序, 也不例外, 因此, 如果你也愿意自定义标题栏, 则需要使用无框架的窗口并使用HTML, CSS和JavaScript创建标题栏。对你来说幸运的是, 已经有了一个实现此炫酷功能的模块, 可以轻松地安装它并根据需要对其进行自定义。

在本文中, 我们将向你解释如何实现灵感源自Visual Studio Code标题栏的自定义标题栏。

1.使用Node.js集成创建框架窗口

第一步, 你需要在要实现此自定义标题栏的窗口中定义一些属性。你将在Electron的主要过程(用于初始化第一个窗口的文件)中作为配置对象的属性来执行此操作, 该配置对象专门接收BrowserWindow实例。

我们必须像在Electron的先前版本中一样突出此步骤, 默认情况下已启用节点集成, 但是现在尚未启用, 它将始终将此属性设置为false, 因此请务必启用它以便能够在渲染器过程中需要该模块。禁用框架并将nodeIntegration设置为true的main.js文件中createWindow函数的示例：

// Modules to control application life and create native browser window

const { app, BrowserWindow } = require('electron')

const path = require('path')

// Keep a global reference of the window object, if you don't, the window wil