Electron 如何给titlebar添加action按钮呢?

作者站长头像
站长
· 阅读数 13

如图:Electron 如何给titlebar添加action按钮呢?

我想要添加几个按钮在titlebar中,这个titlebar是electron框架自带的,不是我们自己写的,请问如何添加呢?

更新1

我们见VSCode,这里就是在titleBar上添加自定义的按钮。这样的效果是怎么做到的呢?

Electron 如何给titlebar添加action按钮呢?

回复
1个回答
avatar
test
2024-06-28

创建一个创建无边框窗口,然后在那个位置自己写一个标题栏。

毕竟在自定义中没有这样的选项。


更新 1:

你或许可以使用 Window Controls Overlay API(WICGMDNElectron)来实现该功能。

answer image

就像 WICG 的这张图那样,只有红框部分是浏览器提供的控件,其左边部分你可以自己写你想要的按钮。

效果图(来自 WICG):answer image


更新 2:

我手头只有 Windows,你看它的 body,正好缺了右上方一角:answer image

而你看这个,这是一个设置了 display_override 包含 window-controls-overlay 的 PWA,它的 body 也是缺了那一块,所以我认为 VSCode 就是通过 Window Controls Overlay API 来实现的这样的效果。answer image

有了答案之后再去搜索,发现 VSCode 确实在这里设置了属性,并在这里用包含 titleBarOverlay 的对象去初始化了窗口。这种方式和 Electron 文档上的第二个示例的使用方式是一样的:

// on Windows
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

所以 VSCode 通过使用 Window Controls Overlay API 来实现你想要的效果。

看到你的评论,我就打开了 VSCode 的源码,但我发现我既读不懂又没时间读,所以我就换了一种方式,不过最终还是回到了源码。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容