PyQt5学习入门-3-Qt Designer布局

摘要：

这篇文章是关于如何利用Qt Desinger来进行布局的。

1.布局的目的

我们为什么要进行布局？如果进行了 上篇文章的实验的读者，可以尝试把窗口拉大，我们会发现，所有按键的大小都不会有任何的改变。

这显然是不美观的，而且不符合预期的效果。我们希望按键大小能够随着窗口的大小变化而变化，这就需要进行布局。

2.布局的类型

Qt Desinger中有几种布局的方式。

第一种：垂直布局
垂直布局组件之间垂直摆放

第二种：水平布局

水平布局即组件之间水平摆放

第三种：网格布局

网格布局就是组件之间以网格的形式进行布局。

这里需要注意的是：水平布局和垂直布局都和原始组件摆放的位置没有任何的关系，但是网格布局和原来摆放的位置有关系。

例如，未布局前按键的摆放如下：

进行水平布局、垂直布局、网格布局后分别如下：

但是若未布局前按键摆放如下：

进行水平布局、垂直布局、网格布局后分别如下：

3.布局的步骤

了解了基本的布局类型后就可以开始布局了。

需要注意的是布局时要先规划好组件之间的布局关系。

以 上篇文章中的这个图为例：

步骤1

布局前，先构思布局的布局方案，假设我的方案如下：

每一行的按键为水平布局，行于行之间的是垂直布局：

按键0 按键. 按键+ 为水平布局，水平布局后整体标记为水平1

按键1 按键2 按键3 按键- 也是水平布局，水平布局后整体标记为水平2

按键4 按键5 按键6 按键* 为水平布局，水平布局后整体标记为水平3

按键7 按键8 按键9 按键/ 为水平布局，水平布局后整体标记为水平4

按键Clear 按键= 为水平布局，水平布局后整体标记为水平5

水平1与水平2与水平3与水平4与水平5与文本输出框为垂直布局

确定好方案之后就可以进行操作了。

步骤2

选择按键0 按键. 按键+，如下图：

当然，也可以在对象查找器中找到这3个按键，然后用Ctrl+鼠标左键选择这3个按键。

步骤3

选择组件后，点击工具的

即下图中的红色框框

点击后3个按键会有一个红色的框框包住，如下图：

同样，对：

按键1 按键2 按键3 按键- 为水平布局

按键4 按键5 按键6 按键* 为水平布局

按键7 按键8 按键9 按键/ 为水平布局

按键Clear 按键= 为水平布局，后有：

最后将选中所有（Ctrl+A)。
水平1与水平2与水平3与水平4与水平5与文本输出框为垂直布局

后有：

步骤4

步骤也就是最后一步，我们需要对窗体进行布局。

在对象查看器中，顶层的对象还是处于未布局的状态：

红色框框中的标志即未布局的意思， 选中顶层，然后对其进行布局。

可以进行水平、垂直、网格的任意一种（效果一样）。布局后：

同时，对象查看器变为：

至此已经完成了所有布局，按CTRL+R预览的时候拉大窗口，所有组件会随着窗口的变化而变化。

4.布局的属性设置

在上面，我们虽然完成了布局，但是布局后按键的大小并不是我们期望得到到的。

比如，按键0和按键.和按键+希望以一个不同比例的大小来显示。希望得到如下的效果：

可以看到，按键0是按键.和按键+的两倍大小，而按键+和按键.一样大。

设置的步骤如下：

选择水平1布局（在对象查看器中选择）

然后在对象属性中的 layoutStrethc中设置比例。

数字的排列顺序与界面中按键排序顺序一致。希望得到是2:1:1的效果。回车确定后可以看到按键比例变化了。

另外，我们还需要按键0与左边界留出点空格，按键+与右边界留出点空格。我们改变参数layoutLeftMargin和layoutRightMargin。效果如下：

最后，我们希望文本输出框和最上一排按键有一些空间隔开，具体如下效果：

这个时候，我们就需要进行重新布局。

因为我们每次只能调整某一个布局内到上、下、左、右的距离（Margin）以及布局内各组件的比例大小。

文本输出框于最上面一排按键（水平5）不在单独的同一个布局中，所以无法改变，如果希望实现上图的效果需要把最上面的一排按键（水平5）与文本输出框放在一个布局内，而且时垂直布局。

具体来说就是，将水平5与文本输出设置为垂直布局，其他步骤类似。

最后在对象查看器中选择垂直1布局。改变layoutSpacing的值即可。