说起electron窗口尺寸的设置,其实听起来应该是极其简单自然的事情,没有什么可以写的。不就是设置electronBrowserWindowwidthheight么?但是,对于electron的窗体来说,这些参数的设置,还真是有些复杂。因为各个参数之间总是相互影响的。那么,就会导致预期和实际有所差别。

苏南大叔:electron 窗体尺寸如何设置?宽度高度如何设置范围 - electron-size
electron 窗体尺寸如何设置?宽度高度如何设置范围(图2-1)

本文主要讲述的就是electron窗口尺寸相关的事情,试验对象是:mac/electron@3.x

基本设置

BrowserWindow的基本设置就是这样的:必然设置widthheight,偶然设置其对应范围属性:

  • maxWidth 最大宽度
  • minWidth 最小宽度
  • maxHeight 最大高度
  • minHeight 最小高度

下面代码是使用范例:

mainWindow = new BrowserWindow({
  width: 600,
  height: 360,
  maxWidth: 800,
  minWidth: 400,
  maxHeight: 420,
  minHeight: 300,
});

注意设置了min值和max值之后,实际的值就不能超过这个范围。即使执行下面的函数行为:fullscreen()或者maximize()或者minimize()

苏南大叔:electron 窗体尺寸如何设置?宽度高度如何设置范围 - browser-win-param
electron 窗体尺寸如何设置?宽度高度如何设置范围(图2-2)

通过函数设置上述值的办法:

mainWindow.setMaximumSize(500,500);
mainWindow.setMinimumSize(300,300);
mainWindow.setSize(200,200);

特殊设置:useContentSize

这里有一个极为特殊的属性,叫做useContentSize。设置为true的话,刚刚设置的height属性,就会变成文档的高度。对于用户感知层面上来说:这个时候,因为有标题栏的存在,实际的高度要高一些。目前,在mac下,这个高度是22像素。

useContentSize:true
  • 在参数中设置widthheight,以及useContentSize:true的话,窗体实际高度为height+22。
  • 而在函数调用setSize(newWidth,newHeight)的话,将忽略useContentSize:true设置,实际高度为newHeight。同时忽视参数中的maxWidthmaxHeight设置。

特别提示:win下面的高端宽度

似乎这里还是有变数的,待总结。据反馈来说,mac下面几乎是没有什么问题的,但是win下面,各种神奇问题还是频出的。比如下面的这个问题:

总结

本来本文里面,还有最大化最小化以及全屏函数等相关信息的,不过在实验的过程中,苏南大叔发现:相互制约因素太多,所以后面单独成篇了。文章链接见这里:

本文说的普通的窗体尺寸,如果您想控制的是新开窗体的尺寸,请点击下面这篇文章:

大家有相关想法的话,可以给苏南大叔留言。

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

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

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

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

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