【11】Qt Designer

Table of contents

VSCode adds external tools

QtDesigner

PyUIC

PyRCC

Load UI file template code

QMainWindow

QWidget

Common knowledge points

1. Modify title icon

2. Image resource management

3. Picture button

4. Load dialog box

5. Dynamically load Widgets

6. Modify the theme

Other things to note

The event was triggered multiple times


PyQt5 provides a visual graphics toolQt Designer, the file name is designer.exe. If you can't find it on your computer, you can use the following command to install it:

pip install PyQt5-tools

 

After the installation is complete, this tool software can be found in the following directory:

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

Note: %LOCALAPPDATA%Regular representativeC:\Users\你的用户名\AppData\Local\

VSCode adds external tools

QtDesigner

OpenPYQT Integrationplug-in settings, searchdesigner, and set your localdesigner.exe full path into it.

 

 

Note that ifdesigner.exe is not found:

  1. The Program path should be set according to the path of PyQt5-tools installed by yourself (pip install PyQt5-tools)
  2. The path of the installed PyQt5-tools depends on the path when installing Python ( pip -V can see the path)
  3. If you are using Python3.9.x, try to use the following path file (first try to see if it can be opened in Win+R):

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

  1. Cannot be found, it is recommended to installeverything.exe and search globallydesigner.exelocation

After the setting is completed, we can right-click on the .ui file and perform the following operations:

 

You can also right-click in any directory to create a new ui file.

PyUIC

Open settings, filter pyuic, and fill in as shown below:

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

This configuration is to right-click.ui the file and click PYQT:Compile Form to generate the corresponding .py file

PyRCC

Make sure the configuration is as follows:

After is added, you can right-click on the .qrc file to generate the corresponding resource file. PYQT: Compile Resource.py

 

Load UI file template code

QMainWindow

After we generate the file through the visualization toolQtDesigner, it needs to be loaded and displayed in the code. You can refer tosome tutorials for conversion. .uiPyUIC

After usexxx.ui to generatexxx.py the code file, you can use the following code to load it.

Note that the ui related files in this example are all in the ui directory, that is, under the loaded ui package ui_main_windowModule

"""
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()

The directory structure is as follows

 

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_())

Common knowledge points

1. Modify title icon

2. Image resource management

3. Picture button

background-color: transparent;
border: none;

4. Load dialog box

5. Dynamic loadingWidget

6. Modify the theme

qt-material

Theme official website:GitHub - UN-GCPDS/qt-material: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6

How to use:

Install:

pip install qt-material

Code:

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_()

Effect:

 

Other things to note

The event was triggered multiple times

Problem Description:

If you set a slot function for the signal of a button or component, you expect it to be triggered only once per click, but it is inexplicably triggered multiple times.

Cause Analysis:

Reference document introduction:QMetaObject - Qt for Python

The reason is probably due to the slot function naming problem. Because we use the .ui file to generate the .py file, the following method will be executed. Help us bind the corresponding slot function according to the variable name of the component:

QtCore.QMetaObject.connectSlotsByName(ChatRoomsWidget)

Suppose our object has a sub-object of type QPushButton with the object name button1. Then automaticallyconnect and the slot for capturing the button's clicked() signal is:

def on_button1_clicked(): 

If the object itself has an object name set via setObjectName(), its own signal is also connected to its corresponding slot.

Solution:

Change the name of the slot function, or declare the slot function directly according to the official rules

 

 

 

 

 

 

 

Guess you like

Origin blog.csdn.net/bug_love/article/details/134841060