如何自定义Electron标题栏并使其可拖动

Question

我正在进行一个electron项目，并想在顶部添加一个自定义框架。我想知道是否有人知道如何做到这一点？这是一个屏幕截图模型，显示了我想让自定义框架具备的功能：模型 我还想在这个区域中放置一些按钮和选择器。如果你能提供任何帮助来实现其中任何一个，请告诉我！

- Folded Lettuce

Answer 1

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

通过设置 titleBarStyle: false 和 frame: false，原生标题栏和默认按钮将被隐藏。

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

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

- tpikachu

---

好的，谢谢。我已经成功让那个bar工作了。我只有一个关于它的问题。如果我想要使顶部的bar能够"可拖动"，从而使这个应用程序能够被拖动，我该怎么做？ - Folded Lettuce

@FoldedLettuce 我已经更新了答案。你可以检查一下。 - tpikachu

不客气，随时欢迎。 - tpikachu