(2) Pyqt5 tutorial -- > using qtdesigner to separate interface code

GitHub Connect ：
This column all source code GitHub Through train

I've talked about one in the last article pyqt5 What is the basic framework of , This article uses QTdesigner Let's design the interface
Chapter one ：pyqt5 Basic framework

1、QTdesigner

QTdesigner It's a GUI Visual design software , I wasn't there Python the pyqt5 tools Inside down , I did it by installing QT5.9.8 To get , Because you may use it later C++ Written QT. This visualization tool is actually similar to visual base、C# In this language , These two languages can be used to design the upper computer directly by dragging GUI Interface design , And then generate the code , I just need to write the logic code of the interface .

start-up QTdesigner Choose the last one , You can create a blank window

The left column is all kinds of controls , Here I pull two text edit、 Two pushbutton Come out and form an interface

Save it at this time .

The saved file is .ui file , It's standard xml file , And in the development process , If it is to use C++ Development needs to be transformed into .cpp file , Now it is pyqt, So we need to .ui File to .py file , stay .ui File directory command line input command

pyuic5 -o demo.py demo.ui

Take a look at my design above ui File corresponding py Code

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

# Form implementation generated from reading ui file '02.ui'
#
# Created by: PyQt5 UI code generator 5.15.2
#
# 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.setObjectName("Form")
        Form.resize(748, 523)
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(90, 160, 75, 23))
        self.pushButton.setObjectName("pushButton")

        self.retranslateUi(Form)
        self.pushButton.clicked.connect(Form.close)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.pushButton.setText(_translate("Form", "pushButton"))

2、 Call the designed interface code

At the beginning, we will talk about the separation of interface and code .
First of all, we need two at this time py file , One is just from ui It's a document py file , One is that our program runs py file , In other words, the generated code file should be used as a package . In the new py File to import this package
therefore import Part of it is ：

from ui2 import Ui_Form# Import on QTdesigner Well designed  ui.py  file 
import sys
from PyQt5 import QtWidgets

The main program frame remains unchanged ：

mydesigner It's still a class defined by myself
QApplication amount to main function , That's the whole program （ There are a lot of documents ） Main entry function of .
For one Gui The program must have at least one such instance to run .

The last sentence is to call sys Library exit Exit method , Exit conditions （ Parameters ） yes
app.exec_() That is, the whole window is closed .

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    myshow = mydesigner()
    myshow.show()
    sys.exit(app.exec_())

Custom class ：

class mydesigner(QtWidgets.QWidget):
    def __init__(self):
        super(mydesigner,self).__init__()
        self.new = Ui_Form()# Create examples  
        self.new.setupUi(self)# Load form , But not yet 

You can also make mydesigner This class inherits custom Ui_Form class , At this point, you can directly self.setupUi,
The difference between inheriting and not inheriting is calling Ui_Form The contents and methods of classes are different .Ui_Form Class is to use QTdesigner The generated class

class mydesigner(QtWidgets.QWidget,Ui_Form):
    def __init__(self):
        super(mydesigner,self).__init__()
        self.setupUi(self)

Running results