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

kcugc4gi 于 2023-09-28 发布在 Electron

关注(0)|答案(2)|浏览(182)

好吧，所以我希望标题栏不在主窗口内，而是在它上面的一个栏，当不悬停在主窗口或标题栏上时，它会变得透明。
我有一个来自另一个电子应用程序here的例子。
有谁知道我怎么能创造出这样的东西吗？我想创建第二个窗口，但我认为这是行不通的。但是有人做了它所以它一定是可能的

2条答案

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

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

查看Electron Docs，了解关于透明窗口的跨平台提示。
然后，您可以在标题栏上添加或删除类，以使其显示/消失。titlebar元素应该有css属性-webkit-app-region: drag

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

win.setIgnoreMouseEvents(true)

检查电子文档的问题，因为转发可以得到相当复杂。

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

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