如何自定义 Electron 应用程序的窗口标题栏？答案

【问题标题】：How to customize the window title bar of an Electron app?如何自定义 Electron 应用程序的窗口标题栏？
【发布时间】：2016-06-10 03:50:27
【问题描述】：

我开始使用Electron 构建桌面应用程序。如何自定义窗口标题栏（包含关闭、最小化和全屏按钮）以添加自定义视图？ Safari 是我正在考虑的一个例子：

【问题讨论】：

您可以查看http://photonkit.com/
@AlessandroLoziobizBisi 哇！这正是我需要的。谢谢！

标签： macos electron

【解决方案1】：

您在 Electron 中唯一的选择是创建一个 frameless（又名无边框）窗口，然后使用 CSS 创建一个“假”标题栏，包括您需要的任何 UI 元素。

Electron/webkit 提供了 CSS 属性，允许您使任何元素可拖动，例如标题栏：

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

【讨论】：

【解决方案2】：

第一个跨平台选项是创建frameless window。第二种仅适用于 macOS，允许您隐藏标题栏，但保留窗口控件，允许添加自定义按钮。示例：

const { BrowserWindow } = require('electron')

// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()

然后您可以使用 css 属性 -webkit-user-select 和 -webkit-app-region 来指定拖动区域。

【讨论】：

【解决方案3】：

隐藏默认标题栏：

// main.js
window = new BrowserWindow({
    titlebarStyle: 'hidden',
    trafficLightPosition: {
        x: 15,
        y: 13,  // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
    },
})

然后使用 HTML + CSS 创建您自己的人造标题栏：

<!-- index.html -->
<body>
    <header class="titlebar"></header>
    ...
</body>

/* styles.css */
.titlebar {
    background-color: #f0f0f0;
    height: 40px;
    border-bottom: 1px solid #d0d0d0;
    -webkit-app-region: drag;    /* Allow user to drag the window using this titlebar */
    -webkit-user-select: none;   /* Prevent user from selecting things */
    user-select: none;
}

目前的结果：

注意标题栏出现在滚动条下方！它甚至会在用户滚动时移动。我们需要通过将标题栏下方的所有内容包装在 <div class="main-content"> 中，然后添加这些样式，将其与可滚动的 HTML 内容分开：

.main-content {
    height: calc(100vh - 40px);  /* Force the content to take up the viewport height minus the titlebar height */
    overflow: auto;              /* Allow the main content to be scrollable */
}
.body {
    overflow: hidden;            /* Make the HTML body be non-scrollable */
}

最终结果：

【讨论】：