javascript - 如何自定义 Electron 标题栏以及如何使其可拖动

Question

我正在做一个 Electron 项目，想在顶部添加一个自定义框架。我想看看是否有人知道该怎么做？这是我希望自定义框架能够包含在其中的屏幕快照样机:
Mockup
我还希望能够在此区域中放置一些按钮和选择器。如果您能提供帮助以实现上述目标，请告诉我!

Answer 1

  const mainWindow = new BrowserWindow({
            width: 1200,
            height: 800,
            minWidth: 1200,
            minHeight: 800,
            titleBarStyle: 'hiddenInsect',
            frame: false,
            webPreferences: {
                nodeIntegration: true,
                devTools: true
            }
        });

通过设置 titleBarStyle:false和 frame: false， native 标题栏和默认按钮将被隐藏。
现在，您可以构建自己的标题栏。
然后，要使其可拖动，您需要使用 -webkit-app-region: drag将其添加到 header CSS上，以便该 header 成为可拖动区域。