electron开发群体中,有着大量的开发人员,希望自己的窗体是个不规则窗体。例如如下需求:自定义标题栏,在标题栏上加个新按钮,干掉某个标题栏按钮,或者要求窗体为圆角边框,要求窗体为圆形窗体等等。这些需求的实现,都需要用到本文中的思路。本文的主要讲述的内容就是:electron如何实现不规则窗体。

苏南大叔:electron 如何实现圆角不规则窗体?mac 顶部像素条如何去除? - electron-special-window
electron 如何实现圆角不规则窗体?mac 顶部像素条如何去除?(图4-1)

本文测试环境:mac@mojavaelectron@3

electron窗体参数

需求实现的主要部分,就是要正确设置BrowserWindow的各种参数了,第一要无边框,第二要透明。至于是否永远在顶部(alwaysOnTop),就要看情况设置了。

  mainWindow = new BrowserWindow({
    //height: 360,
    //width: 360,
    maximizable: false,
    minimizable: false,
    resizable: false,
    fullscreenable: false,
    frame:false,
    transparent: true,
    hasShadow:false,
    //alwaysOnTop: true,
  })

主要关注的属性就是:

  • frame:false
  • transparent: true
  • hasShadow: false
  • maximizable: false
  • minimizable: false
注意绝对不能设置的属性有vibrancybackgroundColor,因为会影响窗体的透明性transparent
mainWindow = new BrowserWindow({
  //vibrancy: "dark",
  //backgroundColor: '#fff',
}

相关链接

  • electron 如何创建无边框窗体

https://newsn.net/say/electron-frameless.html

  • mac系统,electron创建无边框窗体的几种特殊方式

https://newsn.net/say/electron-frameless-mac.html

  • mac,electron窗体如何去除系统阴影

https://newsn.net/say/electron-shadow-mac.html

  • win10 系统,electron 窗体如何去除系统阴影

https://newsn.net/say/electron-shadow-win10.html

  • 如何实现 electron 窗体透明 transparent 效果?

https://newsn.net/say/electron-transparent.html

总结

electron的不规则窗体的需求,其实很大。但是在现实的调试过程中,又会出现各种各样的奇怪问题。所以,苏南大叔建议您:如果没有必要,就不要玩electron的异形窗体效果了,费脑细胞。

下面的链接,是苏南大叔提供的electron文章列表,是否加入收藏夹,就看你了。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: