界面设计师 Qt Designer

Qt Designer 简介


点击这里,边看视频讲解,边学习以下内容

QT程序界面的 一个个窗口、控件,就是像上面那样用相应的代码创建出来的。

但是,把你的脑海里的界面,用代码的方式写出来,比较麻烦而且不直观。

很多时候,运行时呈现的样子,不是我们要的。我们经常还要修改代码调整界面上控件的位置,再运行预览。反复多次这样操作。

可是这样,真的…太麻烦了。

其实,我们可以用QT界面生成器 Qt Designer ,拖拖拽拽就可以直观的创建出程序大体的界面。

怎么运行这个工具呢?

Windows下,运行在Python安装目录下 site-packages\site-packages\PySide2\designer.exe 这个可执行文件


根据上面链接的视频讲解,大家初步了解一下 Qt Designer 的使用方法。


通过 Qt Designer 设计的界面,最终是保存在一个ui文件中的。

大家可以打开这个ui文件看看,就是一个XML格式的界面定义。

动态加载UI文件


点击这里,边看视频讲解,边学习以下内容

有了界面定义文件,我们的Python程序就可以从文件中加载UI定义,并且动态 创建一个相应的窗口对象。

如下:

from PySide2.QtWidgets import QApplication, QMessageBox
from PySide2.QtUiTools import QUiLoader
from PySide2.QtCore import QFile

class Stats:

    def __init__(self):
        # 从文件中加载UI定义
        qfile_stats = QFile("stats.ui")
        qfile_stats.open(QFile.ReadOnly)
        qfile_stats.close()

        # 从 UI 定义中动态 创建一个相应的窗口对象
        # 注意:里面的控件对象也成为窗口对象的属性了
        # 比如 self.ui.button , self.ui.textEdit
        self.ui = QUiLoader().load(qfile_stats)

        self.ui.button.clicked.connect(self.handleCalc)

    def handleCalc(self):
        info = self.ui.textEdit.toPlainText()

        salary_above_20k = ''
        salary_below_20k = ''
        for line in info.splitlines():
            if not line.strip():
                continue
            parts = line.split(' ')

            parts = [p for p in parts if p]
            name,salary,age = parts
            if int(salary) >= 20000:
                salary_above_20k += name + '\n'
            else:
                salary_below_20k += name + '\n'

        QMessageBox.about(self.ui,
                    '统计结果',
                    f'''薪资20000 以上的有:\n{salary_above_20k}
                    \n薪资20000 以下的有:\n{salary_below_20k}'''
                    )

app = QApplication([])
stats = Stats()
stats.ui.show()
app.exec_()

进阶练习

请大家利用Qt Designer 实现一个 类似 Postman 的 HTTP 接口测试工具。

界面如下

image

要实现的功能,点击这里观看视频说明

VIP小班学员可以联系老师获取参考代码(标号 qt20191124 )和视频讲解。

界面布局 Layout


点击这里,边看视频讲解,边学习以下内容

我们前面写的界面程序有个问题,如果你用鼠标拖拽主窗口边框右下角,进行缩放,就会发现里面的控件一直保持原有大小不变。这样会很难看。

我们通常希望,随着主窗口的缩放, 界面里面的控件、控件之间的距离也相应的进行缩放。

Qt是通过界面布局Layout类来实现这种功能的。


我们最常用的 Layout布局 有4种,分别是

  • QHBoxLayout 水平布局

QHBoxLayout 把控件从左到右 水平横着摆放,如下所示

  • QVBoxLayout 垂直布局

QHBoxLayout 把控件从上到下竖着摆放,如下所示

  • QGridLayout 表格布局

QGridLayout 把多个控件 格子状摆放,有的控件可以 占据多个格子,如下所示

  • QFormLayout 表单布局

QFormLayout 表单就像一个只有两列的表格,非常适合填写注册表单这种类型的界面,如下所示

Layout 示例

请看视频讲解, 用 layout进行布局。

调整控件位置和大小


点击这里,边看视频讲解,边学习以下内容

调整layout中控件的大小比例

可以通过设定控件的sizePolicy来调整,具体操作请看视频讲解。

调整控件间距

要调整控件上下间距,可以给控件添加layout,然后通过设定layout的上下的padding 和 margin 来调整间距,具体操作请看视频讲解。

要调整控件的左右间距,可以通过添加 horizontal spacer 进行控制,也可以通过layout的左右margin