如何自定义电子标题栏以及如何使其可拖动

Question

我正在从事一个电子项目，并希望在顶部添加一个自定义框架。我想看看是否有人知道该怎么做？这是我希望自定义框架能够包含在其中的屏幕快照模型： 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，本机标题栏和默认按钮将被隐藏。

现在您可以构建自己的标题栏。

然后要使其可拖动，您需要使用-webkit-app-region: drag将其添加到标头CSS中，以便该标头为可拖动区域。