javascript - 在 Electron 窗口悬停时隐藏标题栏？

Question

好的，所以我希望标题栏不在主窗口内，而是在其顶部有一个栏，当鼠标悬停在主窗口或标题栏上时，该栏会透明。

我有一个来自另一个 Electron 应用程序的例子 here .

那么有没有人知道我如何创建这样的东西？我考虑过创建第二个窗口，但我认为这行不通。但是别人已经做到了所以一定是可能的

Answer 1

您需要一个透明的无框架窗口，带有网格或弹性布局的标题栏和容器区域。

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()

查看 Electron Docs带有关于透明窗口的跨平台提示。

然后您可以在标题栏上添加或删除类以使其出现/消失。标题栏元素应具有 css 属性 -webkit-app-region: drag

您应该考虑用内容填充该窗口的不可见区域，这也是一个小动画的完美用例。否则它可能会阻止它后面的应用程序，而用户不知道为什么。否则，您需要通过以下方式手动管理点击转发:

win.setIgnoreMouseEvents(true)

查看 Electron Docs关于这个问题，因为转发可能会变得非常复杂。