electron 窗体尺寸如何设置？宽度高度如何设置范围

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

基本设置

BrowserWindow的基本设置就是这样的：必然设置width和height，偶然设置其对应范围属性：

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

下面代码是使用范例:

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

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

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

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

特殊设置：useContentSize

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

useContentSize:true

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

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

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

• https://newsn.net/say/electron-bug-resizable.html

总结

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

• https://newsn.net/say/electron-max-min.html

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

• https://newsn.net/say/electron-browserwindow-size.html

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

• https://newsn.net/tag/electron/

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