定制 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

效果见下图:
定制 Electron 窗口标题栏_第1张图片

你可能感兴趣的:(Electron,electron,前端,javascript)