Electron 是一款流行的桌面应用开发框架，基于 Web 技术构建，提供了强大的跨平台能力。在开发过程中，经常需要定制窗口标题栏以创造独特的用户体验。
1. 完全隐藏默认标题栏
有时候，我们希望创建一个自定义的标题栏，完全摆脱默认的窗口控制按钮。通过将 titleBarStyle 设置为 'hidden'，我们可以实现这一目标，使得整个标题栏都可以由开发者自行设计。
const {
app, BrowserWindow } = require('electron');
app.on('ready', () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hidden',
});
mainWindow.loadFile('custom_title_bar.html');
});
在这个例子中，我们加载了一个自定义标题栏的 HTML 文件，开发者可以在这个文件中设计独特的标题栏样式，包括自定义的窗口控制按钮。
2. 提供悬停时显示的自定义按钮
对于希望在用户需要时显示窗口控制按钮的情况，可以选择 'customButtonsOnHover' 模式。在这种模式下，窗口标题栏默认隐藏，但当用户将鼠标悬停在窗口顶部时，自定义的窗口控制按钮将出现。
const {
app, BrowserWindow } = require('electron');
app.on('ready', () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'customButtonsOnHover',
});
mainWindow.loadFile('custom_buttons_on_hover.html');
});
这种方式在提供自定义外观的同时，保持了窗口控制按钮的可访问性，使用户体验更加友好。
3. 默认标题栏样式的微调
如果你喜欢默认的标题栏样式，但想要一些微调，例如调整按钮的位置或禁用某些按钮，Electron 提供了相应的配置选项。
const {
app, BrowserWindow } = require('electron');
app.on('ready', () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hidden',
trafficLightPosition: {
x: 6, y: 22 },
maximizable: false,
minimizable: false,
closable: false,
});
mainWindow.loadFile('default_with_customizations.html');
});
通过设置 trafficLightPosition 和禁用按钮，我们可以微调默认标题栏的外观和功能。
- titleBarStyle，控制展示
- ‘hidden’：隐藏
- ‘customButtonsOnHover’：悬停时显示自定义按钮
- ‘default’：窗口默认的标题栏，包括操作按钮
- trafficLightPosition位置偏移
- x
- y
- maximizable：是否禁用放大 Boolean
- minimizable：是否禁用缩小 Boolean
- closable：是否禁用关闭 Boolean
效果见下图：
