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

Question

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

我有另一个电子应用here的例子。

所以有人有任何想法我怎么能创造这样的东西？我想创建第二个窗口，但我认为它不会起作用。但是其他人已经做到了所以它必须是可能的

Answer 1

你需要一个transperent无框窗口，带有网格或弹性布局标题栏和容器区域。

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

查看Electron Docs，了解有关transperent窗口的跨平台提示。

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

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

win.setIgnoreMouseEvents(true)

查看有关此问题的Electron Docs，因为转发可能非常复杂。