隐藏窗口悬停在电子上的标题栏？

Question

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

我有一个来自另一个电子应用程序 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 关于此事的信息，因为转发可能会变得相当复杂。