2-Qt Designer（界面设计师）的简单使用

---

前言

Qt Designer（界面设计师）可以方便我们图形画界面设计界面的布局，不用再一遍又一遍手动调窗口宽高，位置等参数，极大的节省了我们的工作效率。下面是一个简单的Qt Designer入门使用记录。
还是以qt简介里面那个小案例为例子演示。
参考视频：Qt Designer简介
加载ui文件

零、Pycharm配置Qt Designer（这一步是为了方便在Pycharm中使用设计师，并且还可以使用pyuic将ui文件编译成py文件，这样就可以使用函数索引了，这很重要）

参考博客，本博客部分配置可能有点不太一样，下面给出本人的配置界面

上面配置了pyuic可以自动将我们的ui文件编译成python代码，这和前面动态加载虽然效果差不多。但是动态加载有一个致命缺陷，我们无法得到函数索引，因为不知道是什么组件，这很麻烦。我们采取这种pyuic编译成py文件就好用多了。下面会有具体演示

一、打开Qt Designer

找到之前pip install pyside2的环境中PySide2包的位置，我的位置是
D:\Anaconda3\envs\gui_learn\Lib\site-packages\PySide2
将exe文件的快捷方式发送到桌面（不创建快捷方式也行），直接运行
D:\Anaconda3\envs\gui_learn\Lib\site-packages\PySide2\designer.exe
直接跳到这个界面了：
第一步：

二、创建具体ui界面

这里 Main Window 是带有菜单的主窗口，我们那个小例子不需要菜单栏，用Widget窗口就行。所以做Qt主要是要熟悉这些控件。
第二步
新建Widget文件窗口

第三步
拖动需要的控件布局
QPlainTextEdit 文本框

QPushButton 按钮（可以直接改按钮界面显示的名字）— 一般是底层配置文件给出，这里只是给出一个demo名字，读取底层配置后需要代码配置（这个容易，现在ai工具就更方便了）

第四步 修改控件名，这个必须修改，因为这个就是你生成代码里面的控件实例化的变量名，不然两个按钮重名肯定出现问题（到时候导入ui文件的时候就是用这个变量名你才能访问到对应的属性）
直接双击修改即可

第五步设置主窗口标题（title）和文本框提示语
设置主窗口标题（title）

设置文本框提示语

【注】：个人觉得用代码设置这些更方面，在界面上真不是很好找到

三、保存ui文件

建议在你项目文件夹下建一个ui文件夹，存放各种ui文件，方便管理

什么界面就取什么文件名。

四、导入ui文件生成界面实现功能

文件夹结构如下

1 直接动态加载ui文件（不推荐，无法得到组件的方法语法提示，很恼火,并且只有PySide2系列支持，PyQt5不支持这种，都找不到这个QUiLoader方法）

【注】：不好用，并且PySide2有这个QUiLoader方法，但是PyQt5部分版本好像没有这个方法，所以不要用了;PyQt5只能使用下面那种PyUIC编译成py文件的方法
新建stats.py文件

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

class Stats:

    def __init__(self):
        # 从文件中加载UI定义

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

    def handleCalc(self):
        info = self.ui.textEdit1.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_()

2 使用PyUIC将ui文件编译成py文件（推荐这个：通用且好用）=== 今后我们也使用这一种（并且这种方法是使用窗口继承的那种分文件的GUI编程套路）

窗口继承的那种分文件的GUI编程套路：Java Swing GUI编程参考博客

根据ui文件pyuic外部工具编译而成的py文件

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'statistics.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_Form(object):
    def setupUi(self, Form):
        # Form 就是我们的窗口对象
        Form.setObjectName("Form")
        Form.resize(788, 649)
        self.textEdit1 = QtWidgets.QPlainTextEdit(Form)
        self.textEdit1.setGeometry(QtCore.QRect(90, 50, 611, 391))
        self.textEdit1.setObjectName("textEdit1")
        self.statistics_button = QtWidgets.QPushButton(Form)
        self.statistics_button.setGeometry(QtCore.QRect(320, 510, 141, 41))
        self.statistics_button.setObjectName("statistics_button")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "统计薪资"))
        self.textEdit1.setPlaceholderText(_translate("Form", "请输入薪资表"))
        self.statistics_button.setText(_translate("Form", "统计"))

我们自己的代码：

# !/usr/bin/env python
# _*_coding: utf-8 _*_
# @Time : 2024/4/27 14:05
# @Author : JU HE
# @Version: V0.1
# @File : stats.py
# @Email : 13966915864@163.com
# @desc : 添加描述

from PyQt5.QtWidgets import QApplication, QMessageBox
from PyQt5.QtWidgets import QWidget as QtWidget
from statistics import Ui_Form


class StatsWindow(QtWidget):

    def __init__(self):
        super().__init__()
        # 加载UI
        self.ui = Ui_Form()
        self.ui.setupUi(self)
        # 上面的三行代码是死套路，现在我们的self就是我们的窗口对象
        # 从self.ui.中可以访问到我们的窗口对象的控件


		# 下面我们还可以继续代码修改各种信息
        # # 代码设置文本框的提示信息
        self.ui.textEdit1.setPlaceholderText('红红火火恍恍惚惚哈哈哈哈哈哈')

        # 代码设置按钮界面显示的文本
        self.ui.statistics_button.setText('count')

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

    def handleCalc(self):
        info = self.ui.textEdit1.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,
                    '统计结果',
                    f'''薪资20000 以上的有：\n{salary_above_20k}
                    \n薪资20000 以下的有：\n{salary_below_20k}'''
                    )

app = QApplication([])
stats = StatsWindow()
stats.show()
app.exec_()

总结

这就是Qt Designer的简单用法，希望你已经学会了。