如何在Electron中实现窗口悬停时隐藏标题栏？

Question

好的，我希望你能将标题栏放在主窗口之外，而是放在顶部作为一条栏，当鼠标不悬停在主窗口或标题栏上时，该栏变为透明。

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

那么，有人知道如何创建类似的东西吗？ 我考虑过创建第二个窗口，但我认为那不会奏效。 但其他人已经做到了，所以肯定是有可能的。

- Matteo Piatti

Answer 1

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

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

请查看 Electron文档，里面有关于透明窗口的跨平台提示。

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

您应该考虑使用内容填充该窗口的非可见区域，还适用于一些小动画效果。否则它可能会挡住后面的某个应用程序，用户不知道为什么。否则，您需要手动管理转发点击事件：

win.setIgnoreMouseEvents(true)

关于此事，请查看Electron文档，因为转发可能会变得非常复杂。

- Hans Koch

---

嘿，谢谢你，那已经是我要找的了。但是我还有一些与此相关的东西无法弄清楚。希望你能帮忙：

1. 当使用jQuery淡出使其不可见时，body会跳回到100%，看起来有点丑。如果我只改变透明度，它可以工作，但仍然可以点击。示例: https://imgur.com/a/SbOh96q
2. 标题栏消失时会看起来很丑，因为圆角。根据互联网上的说法，当窗口无边框和透明时，边缘应该没有半径。有没有办法让边缘变得硬朗？

- Matteo Piatti

我建议您使用CSS动画并将其绑定到标题栏的高度上。例如，如果您使用flexbox，则内容将自动调整到适当的高度。 "Hard-edges"是指常规边缘，只需删除border-radius属性即可。 - Hans Koch

好的，我已经成功隐藏了标题栏。但硬边缘不是常规的边缘。我指的不是 div 的边缘，而是 electron 窗口的边缘。它们没有 border-radius 属性，我想改变这个。那么我该如何改变呢？谢谢您的帮助。 - Matteo Piatti

Answer 2

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

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

- Patrice Thimothee