本文里,苏南大叔要讲述的是electron的全屏事件fullscreen,当然,这个事件也是比较简单的。但是,出现了一个新的概念,叫做SimpleFullScreen。也就是说,措不及防中,全屏的概念分裂成了2个概念,一个全屏,另外一个叫做简单全屏。那么,在electron中,全屏和简单全屏,是怎么使用的呢?两者又有什么样的关系呢?这就是本文主要探讨的问题。

苏南大叔:electron 如何实现全屏?全屏和简单全屏有什么区别? - electron-全屏
electron 如何实现全屏?全屏和简单全屏有什么区别?(图2-1)

本文测试环境:mac+winelectron@4.0.1

两者区别

全屏和简单全屏的概念,仅仅针对mac有区别,其它系统无此概念。目前来看,mac下的简单全屏,才是更符合苏南大叔想法的全屏效果,不解释。

  • mac系统上,全屏和简单全屏的区别在于:全屏是有标题栏的,只不过隐藏了。简单全屏的话,是没有标题栏的。
  • win系统中,据苏南大叔观察,全屏和简单全屏的表现效果完全一致,没有什么区别。值得说明的是:在win系统下,全屏也是有顶部菜单的,但是没有标题栏。

状态事件

状态事件:

mainWindow.on('enter-full-screen', function () {
  console.log("enter");
});

mainWindow.on('leave-full-screen', function () {
  console.log("leave");
});

这里面的事件包括enter-full-screenleave-full-screen两个事件,同以往一样,事件的触发和大家想象中是不一样的。比如执行leave-full-screen事件,必须是setFullScreen(false)/setSimpleFullScreen(false)来触发的。其它的函数并不能触发。(比如:最大化/最小化/还原函数之类的)

总结

本文中,苏南大叔描述的是electron原生方法,触发全屏的相关注意事项。事实上,如果不使用electron的原生方法,渲染进程的html,也是有自己的能力全屏的,就是传统意义上的网页全屏。这个全屏和electron的原生方法的全屏,在事件角度上来说,甚至和触发方式上来说,都是有区别的。

敬请期待,苏南大叔描述的更多electron相关文字,更多的全屏模式细节等待你来解锁。

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

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

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

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

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