在电子悬停 window 上隐藏标题栏？

Question

好的，所以我希望标题栏不在主 window 内，而是在它上面的一个栏，当不悬停在主 window 或所述标题栏上时，它会变得透明。

我有一个来自另一个电子应用程序的例子 here。

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

Answer 1

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

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

查看 Electron Docs 以及关于透明 windows 的跨平台提示。

然后您可以在标题栏上添加或删除 class 以使其成为 appear/disappear。标题栏元素应该有 css 属性 -webkit-app-region: drag

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

win.setIgnoreMouseEvents(true)

查看有关此事的 Electron Docs，因为转发可能会变得非常复杂。