下载掌阅APP，畅读海量书库
立即打开
2.1节只介绍了一个按钮控件，如果需要更多的控件，则可以从左侧的Widget Box窗格中进行拖曳。本节重点介绍对这些控件的布局。
Qt Designer提供了4种窗口布局方式，分别是Vertical Layout（垂直布局）、Horizontal Layout（水平布局）、Grid Layout（网格布局）和Form Layout（表单布局）。这4种布局方式位于Widget Box窗格的Layouts（布局）栏中，如图2-19所示。
图2-19
· 垂直布局：控件默认按照从上到下的顺序进行纵向添加。
· 水平布局：控件默认按照从左到右的顺序进行横向添加。
· 网格布局：先将窗口控件放入一个网格之中，然后将它们合理地划分成若干行（row）和列（column），并把其中的每个窗口控件放置在合适的单元（cell）中，这里的单元就是指由行和列交叉所划分出来的空间。
· 表单布局：控件以两列的形式布局在表单中，其中左列包含标签，右列包含输入控件。
进行布局一般有两种方式：一是使用布局管理器进行布局；二是使用容器控件进行布局。
以水平布局为例，打开Qt Designer，新建一个QWidget控件，并在其中放入两个子控件：一个文本框（lineEdit）和一个按钮（pushButton）。选中这两个子控件并右击，在弹出的快捷菜单中选择“布局”→“水平布局”命令，如图2-20所示。
图2-20
将layoutFirst.ui文件转换为layoutFirst.py文件后，就可以看到如下内容（本案例的文件名为Chapter02/layoutFirst.py，为了便于阅读，此处依然使用了PyUIC 6生成的PyQt 6代码，只需要把PyQt 6看成PySide 6即可）：
可以看到，在构建子控件QPushButton（按钮）和QLineEdit（文本框）时指定的父控件对象就是QWidget，布局对象QHBoxLayout指定的父控件对象也是QWidget。这与在Qt Designer的“对象查看器”面板中看到的对象依赖关系是一样的，如图2-21所示。
图2-21
注意： 如果从Widget Box窗格中拖曳布局控件，那么其属性中的*Margin（*是通配符，可以匹配一个或多个字符）默认都是0。
新建一个主窗口，以同样的方式进行水平布局、垂直布局、网格布局和表单布局，并对其中的一些控件进行简单的重命名，最终的效果如图2-22所示。本案例的文件名为Chapter02/layoutWin.ui。
图2-22
注意： 网格布局中的“计算”按钮默认占一个方格，对其进行拉伸就可以占3个方格。
在布局之后，就需要对层次有所了解。在程序设计中，一般用父子关系来表示层次，就像在Python中规定代码缩进量代表不同层次一样，如图2-23所示。
图2-23
在“对象查看器”面板中，可以非常明显地看出窗口（MainWindow）→布局（Layout）→控件（这里是pushButton按钮、QLabel标签和QlineEdit文本框）的层次关系。窗口一般作为顶层显示，并且将控件按照要求的布局方式进行排列。
所谓容器控件，就是指能够容纳子控件的控件。使用容器控件的目的是将容器控件中的控件归为一类，以与其他控件进行区分。当然，使用容器控件也可以对其子控件进行布局，只不过没有布局管理器常用。下面对容器控件进行简单介绍。
同样以水平布局为例，新建一个主窗口，先从左侧Widget Box窗格的Containers栏中拖入一个Frame控件，然后在Frame控件中放入Label控件、LineEdit控件和Button控件，并对其进行重命名，如图2-24所示。
图2-24
选中Frame控件并右击，在弹出的快捷菜单中选择“布局”→“水平布局”命令，结果如图2-25所示。
图2-25
本案例的文件名为Chapter02/layoutContainer.ui。将layoutContainer.ui文件编译为layoutContainer.py文件，代码如下（为方便阅读，依然使用PyQt 6代码，PySide 6代码与之雷同）：
需要注意的是，容器QFrame与子控件之间有一个QHBoxLayout。可以看到，使用容器控件进行布局从本质上来说还是调用布局管理器。