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

Question

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

我有另一个电子应用程序的示例。

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

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，因为转发可能会变得相当复杂。

Answer 2

如果您想隐藏标题栏和菜单栏并保留窗口圆角。

new BrowserWindow({
        titleBarStyle : "hidden",
        ...
    });