在本篇文章中,苏南大叔将继续编辑我们的demo范例,要实现的功能就是:electron的窗体边框的隐藏功能。苏南大叔不是特别推荐大家设置这个属性,除非你确实有个需求。

设置frame属性为false即可

代码如下:

const Menu = electron.Menu
function createWindow () {
  //Menu.setApplicationMenu(null)
  mainWindow = new BrowserWindow({width: 800, height: 600, frame:false })
  mainWindow.loadURL("https://electron.org.cn/")
  //...
}

这里注意看这个frame:false,这里就是设置为无边框的。

苏南大叔:electron 如何创建无边框窗体?如何禁止拖动改变窗体大小? - mac_frameless_code
electron 如何创建无边框窗体?如何禁止拖动改变窗体大小?(图4-1)

下面是mac截图:

苏南大叔:electron 如何创建无边框窗体?如何禁止拖动改变窗体大小? - mac_frameless
electron 如何创建无边框窗体?如何禁止拖动改变窗体大小?(图4-2)

下面是win截图:

苏南大叔:electron 如何创建无边框窗体?如何禁止拖动改变窗体大小? - win_frameless1
electron 如何创建无边框窗体?如何禁止拖动改变窗体大小?(图4-3)

总结

事实上,在mac系统中,存在着几种特殊的frameless情况,详见苏南大叔的后续文章。但是无论那种方式,都是可以resize的。所以可能需要再次设置个resize属性。

本篇文章的内容,主要参考这里:

下一篇文章中,苏南大叔将和大家一起学习窗体透明属性。更多electron的文章,请点击这里:

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

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

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

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

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