【11】Qt Designer

VSCode添加外部工具

QtDesigner

PyUIC

PyRCC

加载UI文件模板代码

QMainWindow

QWidget

常用知识点

1. 修改标题图标

2. 图片资源管理

3. 图片按钮

4. 加载对话框

5. 动态加载Widget

6. 修改主题

其他注意事项

事件被多次触发

PyQt5提供了一个可视化图形工具Qt Designer，文件名为designer.exe。如果在电脑上找不到，可以用如下命令进行安装：

pip install PyQt5-tools

安装完毕后，可在如下目录找到此工具软件：

%LOCALAPPDATA%\Programs\Python\Python39\Lib\site-packages\qt5_applications\Qt\bin\designer.exe

注意：%LOCALAPPDATA%通常代表C:\Users\你的用户名\AppData\Local\

VSCode添加外部工具

QtDesigner

打开PYQT Integration插件设置，搜索designer，将自己本地的designer.exe完整路径设置进去。

注意，如果找不到designer.exe：

Program路径要根据自己安装的PyQt5-tools路径设置（pip install PyQt5-tools）
安装的PyQt5-tools路径的取决于安装Python时的路径（pip -V可以看到路径）
如果用的是Python3.9.x，尝试用以下路径文件（先尝试在Win+R中能否打开）：

%LOCALAPPDATA%\Programs\Python\Python39\Lib\site-packages\qt5_applications\Qt\bin\designer.exe

实在找不到，建议安装everything.exe，全局搜索designer.exe位置

设置完成后，我们可以在.ui文件右键进行如下操作：

也可以在任意目录右键新建ui文件

PyUIC

打开设置，过滤pyuic，按照下图填写：

Cmd：pyuic5
Add Options：--import-from=ui
Filepath：Ui_${ui_name}.py

这个配置是为了右键.ui文件时，点击PYQT:Compile Form时，能生成对应.py文件

PyRCC

确保配置如下即可：

添加完成后，可在.qrc文件右键点击PYQT: Compile Resource，即可生成对应的.py资源文件。

加载UI文件模板代码

QMainWindow

我们通过可视化工具QtDesigner生成.ui文件后，需要在代码中加载并显示。可参照PyUIC部分教程进行转换。

使用xxx.ui生成xxx.py代码文件后，可使用如下代码进行加载。

注意，本例的ui相关文件都在ui目录下，即加载的ui包下的ui_main_window模块

"""
PyQt5版GUI工具
"""
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from ui.Ui_main_window import Ui_MainWindow
import sys


class MainWindow(QMainWindow):

    def __init__(self):
        super().__init__()
        # 创建对象
        self.ui = Ui_MainWindow()
        # 初始化内容
        self.ui.setupUi(self)
        # 初始化ui
        self.init_ui()

    def init_ui(self):
        pass
        

def main():
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

目录结构如下

QWidget

from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
import sys
# 帮我们直接运行此文件时，可以加载到上级目录的ui包
sys.path.append("../")

from ui.Ui_my_widget import Ui_MyWidget


class MyWidget(QWidget):

    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_MyWidget()
        self.ui.setupUi(self)

        self.init_ui()

    def init_ui(self):
        pass


if __name__ == '__main__':
    app = QApplication(sys.argv)

    window = MyWidget()
    window.show()

    sys.exit(app.exec_())

QDialog


from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from ui.Ui_serial_setting_dialog import Ui_SerialSettingDialog
import sys

class SerialSettingDialog(QDialog):

    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_SerialSettingDialog()
        self.ui.setupUi(self)

        # 可以通过此设置，固定对话框的大小
        self.setFixedSize(self.width(), self.height())
        self.initUi()

        self.baudrate = None

    def initUi(self):
        pass

    def accept(self):
        super().accept()
        print("accept")
        # 读取当前波特率的设置值
        self.baudrate = self.ui.cb_bt.currentText()

    def reject(self):
        super().reject()
        print("reject")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    dialog = SerialSettingDialog()
    dialog.show()
    sys.exit(app.exec_())

常用知识点

1. 修改标题图标

2. 图片资源管理

3. 图片按钮

background-color: transparent;
border: none;

4. 加载对话框

5. 动态加载`Widget`

6. 修改主题

qt-material

主题官网：GitHub - UN-GCPDS/qt-material: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6

使用方式：

安装：

pip install qt-material

代码：

from qt_material import apply_stylesheet

app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

# setup stylesheet
apply_stylesheet(app, theme='dark_teal.xml')

# run
window.show()
app.exec_()

效果：