我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

electron的窗体编程过程中,总是有同学会碰上窗体阴影的问题。那么,在本篇文章中,苏南大叔,将要讲述在win10系统中,如何去除系统阴影。

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - electron-shadow
win10 系统,electron 窗体如何去除系统阴影(图8-1)

系统阴影开关

系统设置里面,有个窗口阴影的总开关。我们如果想去除阴影的话,这个开关是关闭的情况下,是肯定不会出现窗口阴影的。如果是打开的情况下,我们如果想去除默认的阴影效果,就需要继续读本文的内容了。

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_win_01
win10 系统,electron 窗体如何去除系统阴影(图8-2)

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - final
win10 系统,electron 窗体如何去除系统阴影(图8-3)

方案描述

在win10系统中,只有一个不是太好的方案,来去除系统的窗体阴影效果。那就是:

mainWindow = new BrowserWindow({
    frame:true, 
    //hasShadow:false, 
    transparent: true
})

这个方案虽然能够去掉阴影,但是也去除了系统边框,就是说标题栏区域都去除了,而且要保证在页面内的body层面上,要有css背景色设置,否则就会出现窗体上的透明空洞。效果图如下:

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_transparent_frame
win10 系统,electron 窗体如何去除系统阴影(图8-4)

方案对比

如下是相关参数设置的对比效果,我们加入了hasShadow这个参数对比,这个参数从词义上面看,是控制窗体阴影的。但是,这个参数只在mac系统上面上有效。导致了本文中方案的一大缺憾。

下面的截图中,都是错误的设置,都不能去除系统阴影。

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_frame
win10 系统,electron 窗体如何去除系统阴影(图8-5)

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_has_shadow
win10 系统,electron 窗体如何去除系统阴影(图8-6)

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_transparent_frame2
win10 系统,electron 窗体如何去除系统阴影(图8-7)

苏南大叔:win10 系统,electron 窗体如何去除系统阴影 - shadow_transport
win10 系统,electron 窗体如何去除系统阴影(图8-8)

总结

win10下面用有缺陷的参数组合方案实现了需求。所以,本篇文章的内容,也就是个仁者见仁智者见智的文章了。聪明的读者,您一定会做出自己的选择吧?

更多electron相关经验文章,请点击这里查看。https://newsn.net/tag/electron/

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

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

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