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

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

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

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

两者区别

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

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

测试代码

相关参数:

mainWindow = new BrowserWindow({
    //...
    fullscreenable:true,
    fullscreen: true,
    simpleFullscreen:true,
});

苏南大叔对于这几个参数,是这么理解的:simpleFullscreenfullscreen的一个特殊形态,简单全屏是不按套路出牌的。而fullscreen是按套路出牌的。那么fullscreenable属性,可以控制fullscreen: true属性,还可以控制setFullScreen(true)函数。

全屏函数

全屏函数:

mainWindow.setFullScreen(true);
mainWindow.setSimpleFullScreen(true);

这两个全屏函数和最大化最小化函数完全不一样,前边带有set字样,而且必须传递参数true或者false。当然,大多数情况下,都是要传递true来实现全屏了。

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

状态判断

状态判断:

mainWindow.isFullScreen()
mainWindow.isSimpleFullScreen()

因为在win下,全屏和简单全屏是一样的效果。所以,对于win来说,isFullScreen()isSimpleFullScreen(),也是同真同假的。

状态事件

状态事件:

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相关文字,更多的全屏模式细节等待你来解锁。

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

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

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

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