如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

在本篇文章中,苏南大叔将继续编辑我们的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)

window下自动隐藏菜单

注意看,我们上一节中所学习的隐藏菜单的代码,是被注释掉的。但是设置frame:false之后,在window下面,菜单也跟着变没了。当然,mac下面还是存在的。

窗体是可以拖动改变大小

边框隐藏后,窗体居然还能改变大小。这个和大家的认知可能有些出入。需要再次设置一个 resizable:false 属性。(注意拼写没有resize的e)。

electron如何创建无边框窗体 - resize_no

electron如何创建无边框窗体(图4-4)

总结

事实上,在mac系统中,存在着几种特殊的frameless情况,详见苏南大叔的后续文章。但是无论那种方式,都是可以resize的。所以可能需要再次设置个resize属性。本篇文章的内容,主要参考这里:https://electron.org.cn/doc/api/frameless-window.html

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-frameless.html
上一篇好文:如何隐藏electron窗体的菜单?
下一篇好文:mac系统,electron创建无边框窗体的几种特殊方式

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~