定制 Electron 窗口标题栏

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

效果见下图：