PyQt5快速开发与实战 3.2 布局管理入门 and 3.3 Qt Designer实战应用

PyQt5快速开发与实战

3. 第3章 Qt Designer的使用

3.2 布局管理入门

Qt Designer提供了4种窗口布局方式，分别是:Vertical Layout（垂直布局）、Horizontal Layout（水平布局）、Grid Layout(栅格布局）和Form Layout（表单布局）。

• 垂直布局:控件默认按照从上到下的顺序进行纵向添加。
• 水平布局:控件默认按照从左到右的顺序进行横向添加。
• 栅格布局:将窗口控件放入一个网格之中，然后将它们合理地划分成若干行(row）和列（column），并把其中的每个窗口控件放置在合适的单元（cell)中，这里的单元即是指由行和列交叉所划分出来的空间。
• 表单布局：控件以两列的形式布局在表单中，其中左列包含标签，右列包含输入控件。

一般进行布局有两种方式:一是通过布局管理器进行布局;二是通过容器控件进行布局。

3.2.1 使用布局管理器布局

点击水平布局

将ui文件转换成py文件

可以看到，子控件 QpushButton（按钮）和 QlineEdit（文本框）在构建的时候指定的父控件对象就是 QWidget，布局对象QHBoxLayout指定的父控件对象也是QWidget。这与在 Qt Designer的对象查看器中看到的对象依赖关系是一样的。

新建一个MainWindow

3.2.2 使用容器进行布局

所谓容器控件，就是指能够容纳子控件的控件。使用容器控件，目的是将容器控件中的控件归为一类，以有别于其他控件。当然，容器控件也可以对其子控件进行布局，只不过没有布局管理器常用。

使用容器进行控件布局本质上还是调用的布局管理器。

3.3 Qt Designer实战应用

3.3.1 绝对布局

设置每个窗口控件的绝对坐标和大小，对其进行布局管理。

最简单的布局方法就是设置geometry这个属性 → 设置控件在窗口中的绝对坐标和空间自身的大小。

这个参数代表：

• 这个按钮控件左上角距离主窗口左侧为410px
• 上侧为210px
• 控件宽度为91px
• 高度为31px

3.3.2 使用布局管理器布局

1. 垂直布局

设置垂直布局后，标签的geometry属性变成了灰色不可用，这说明这些标签的位置与大小已经由垂直布局管理器接管，与geometry无关了。

2. 网格布局

栅格布局的意思是该布局管理器的窗口呈网格状排列。

3. 水平布局

Vertical Spacer表示两个布局管理器不要彼此挨着，否则视觉效果会不好看。

Horizontal Spacer表示“开始”按钮应该与栅格布局管理器尽可能离得远一些,否则视觉效果也会不好看。

Horizontal Line（Vertical Line）表示“开始”按钮与左边的两个布局管理器根本不是同一个类别，用一条线把它们区分开来。

4. minimumSize 和 maximumSize属性

设置控件在布局管理器中的最小尺寸和最大尺寸。

5. sizePolicy属性

每个窗口控件都有属于自己的两个尺寸：

• sizeHint(尺寸提示) → 窗口控件的期望尺寸
• minimumSize(最小尺寸) → 窗口控件压缩时所能被压缩到的最小尺寸

sizePolicy的作用是，如果窗口控件在布局管理器中的布局不能满足我们的需求，那么就可以设置该窗口控件的sizePolicy来实现布局的微调。sizePolicy也是每个窗口控件所特有的属性，不同的窗口控件的sizePolicy可能不同。

关于水平策略和垂直策略：

• Fixed：窗口控件具有其sizeHint所提示的尺寸且尺寸不会再改变
• Minimum:窗口控件的sizeHint所提示的尺寸就是它的最小尺寸;该窗口控件不能被压缩得比这个值小，但可以变得更大。
• Maximum:窗口控件的sizeHint所提示的尺寸就是它的最大尺寸;该窗口控件不能变得比这个值大，但它可以被压缩到minisizeHint给定的尺寸大小。
• Preferred:窗口控件的sizeHint所提示的尺寸就是它的期望尺寸;该窗口控件可以缩小到 minisizeHint所提示的尺寸,也可以变得比sizeHint所提示的尺寸还要大。
• Expanding:窗口控件可以缩小到minisizeHint所提示的尺寸，也可以变得比sizeHint所提示的尺寸大，但它希望能够变得更大。
• MinimumExpanding:窗口控件的sizeHint所提示的尺寸就是它的最小尺寸;该窗口控件不能被压缩得比这个值还小，但它希望能够变得更大。
• Ignored:无视窗口控件的 sizeHint和 minisizeHint所提示的尺寸，按照默认来设置。

【Minimum指的是该窗口控件的尺寸不能低于sizeHint所提示的尺寸; Maximum指的是该窗口控件的尺寸不能高于sizeHint所提示的尺寸。】

关于水平伸展和垂直伸展

把三个Table的垂直伸展分别设置为1，3，1，可以看到三个标签会按照比例进行放缩。

3.3.3 其他需要注意的内容

1. Qt Designer布局的顺序

   使用Qt Designer开发一个完整的GUI程序流程如下：

   • 将一个窗口控件拖入窗口并放置在大致正确的位置上，除了容器窗口，一般不需要调整窗口的尺寸大小
   • 对于要用代码引用的窗口控件，应指定一个名字;对于需要微调的窗口控件，可以设置其对应的属性。
   • 重复步骤l和2，直到所需要的全部窗口控件都放到了窗口中。
   • 如有需要，在窗口控件之间可以用Vertical Spacer、Horizontal Spacer,Horizontal Line、Vertical Line隔开。
   • 选择需要布局的窗口控件，使用布局管理器或者切分窗口（splitter）对它们进行布局。
   • 重复步骤5，直到所有的窗口控件和分隔符都布局好为止。
   • 单击窗口,并使用布局管理器对其进行布局。
   • 为窗口的标签设置伙伴关系。
   • 如果按键次序有问题，则需要设置窗口的Tab键次序。
   • 在适当的地方为内置的信号和槽建立信号与槽连接。
   • 预览窗口，并检查所有的内容能否按照设想进行工作。
   • 设置窗口的对象名（在类中会用到这个名字）、窗口的标题并进行保存。
   • 使用 Eric或有类似功能的工具（如在命令行中使用 pyuic5）编译窗口，然后根据需要生成对话框代码
   • 进行正常的代码编写工作，即编写业务逻辑文件。

2. 使用布局管理器对窗体进行布局

单击窗体 → 右键 → 布局 → 选择布局

还可以打破布局来撤销操作。

3. 设置伙伴关系

预览时，快捷键 alt + s 能快速定位到

注意：设置伙伴关系只对英文名字的Display Widgets有效

4. 设置Tab键次序

另一种方法

3.3.4 测试程序

新建layout_demo_LayoutManage.py

from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QMainWindow,QApplication
from UI_layout_demo_LayoutManage import Ui_LayoutDemo

class LayoutDemo(QMainWindow,Ui_LayoutDemo):
    def __init__(self,parent = None):
        super(LayoutDemo,self).__init__(parent)
        self.setupUi(self)

    @pyqtSlot()
    def on_pushButton_clicked(self):
        print("收益_min:",self.doubleSpinBox_returns_min.text())
        print("收益_max:",self.doubleSpinBox_returns_max.text())

        print("最小回撤_min:",self.doubleSpinBox_maxdrawdown_min.text())
        print("最大回撤_max:",self.doubleSpinBox_maxdrawdown_max.text())

        print("sharp比_min:",self.doubleSpinBox_sharp_min.text())
        print("sharp比_max:", self.doubleSpinBox_sharp_max.text())

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ui = LayoutDemo()
    ui.show()
    sys.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这里有个小问题，这个界面和设计预览时得到的界面不一样，

解决办法

加上一行代码

from pyqt5_plugins.examples.exampleqmlitem import QtCore
QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling)
1
2

解决