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

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

下面是mac截图:

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

下面是win截图:

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

window下自动隐藏菜单

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

窗体是可以拖动改变大小

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

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

总结

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

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

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