Each window and control in the QT program interface is created with the corresponding code as above.
However, it is somewhat difficult to write the interface in your mind directly in code.
Many times, the appearance at runtime is not what we want. We often have to modify the code to adjust the position of the controls on the interface and then run the preview. Repeat this operation several times.
But this is really... too troublesome.
In fact, we can use QT Interface Builder Qt Designer to intuitively create the general interface of the program by dragging and dropping.
How to run this tool?
Under Windows, run Scripts\pyside2-designer.exe this executable file in the Python installation directory
. If you are installing pyqt5, run Scripts\pyqt5designer.exe this executable file in the Python installation directory
. According to the video explanation linked above, everyone will have a preliminary understanding of how to use Qt Designer.
The interface designed through Qt Designer is finally saved in a ui file.
You can open this ui file and take a look. It is an interface definition in XML format.
Dynamically load UI files
- Execute the following command to directly convert the UI file into a Python code file containing the interface definition.
pyside2-uic main.ui > ui_main.py
If you are installing PyQt5, execute the command in the following format to convert
pyuic5 main.ui > ui_main.py
and then use the class that defines the interface in your code file
from PySide2.QtWidgets import QApplication ,QMainWindow from ui_main import Ui_MainWindow class MainWindow(QMainWindow): def __init__(self): super().__init__() # Use the ui file to import the defined interface class self.ui = Ui_MainWindow() # Initialize the interface self.ui.setupUi(self ) # Use the controls defined by the interface, and also access self.ui.webview.load(' http://www.baidu.com ') app = QApplication([]) mainw = MainWindow() mainw.show() from the ui app.exec_()
So which method should we use? Load dynamically or convert to Python code?
Baiyue Heiyu suggested: It is usually more convenient to use dynamic loading, because after changing the interface, there is no need to convert and it can be run directly, which is particularly convenient.
However, if your program has controls that are not provided by Qt Designer, you will need to add some additional declarations to the code, and there may be strange problems. It is often necessary to use the method of converting Python code.
An exercise.
Please use Qt Designer to implement a similar Postman HTTP interface testing tool.
The interface is as follows
To implement the function, click here to watch the video description
. Several common controls are used in this interface: buttons, single-line text boxes, multi-line text boxes, combination selection boxes, and tables.
Friends who have never been exposed to the selection box and table controls can first study the later chapters of this tutorial 常见控件2 .
If you are not familiar with using Python language to send HTTP requests, you can make the interface first.
Then click here to learn Baiyue Heiyu's HTTP Requests tutorial , and then implement it. 游客 You can also do this exercise and get the reference code. Click here to view
the interface layout Layout
. Click here to watch the video explanation and learn the following content.
There is a problem with the interface program we wrote earlier. If you use the mouse to drag the lower right corner of the main window border , zoom, and you will find that the controls inside always maintain their original size. This would be ugly.
We usually hope that as the main window scales, the controls in the interface and the distance between them will also scale accordingly.
Qt implements this function through the interface layout Layout class.
There are 4 most commonly used Layout layouts, namely
- QHBoxLayout horizontal layout
QHBoxLayout arranges the controls horizontally from left to right, as shown below
- QVBoxLayout vertical layout
QHBoxLayout arranges the controls vertically from top to bottom, as shown below
- QGridLayout table layout
QGridLayout arranges multiple controls in a grid. Some controls can occupy multiple grids, as shown below
- QFormLayout form layout
The QFormLayout form is like a table with only two columns, which is very suitable for filling in this type of interface such as registration forms, as shown below
Layout example
Please watch the video explanation to use layout for layout.
MainWindow's Layout
If the main window we choose is the MainWindow type, to set the overall Layout for the MainWindow, it must be 先添加一个控件到 centralwidget 下面 as follows
Then you can right-click MainWindow and select Layout, as follows
Click here to adjust the position and size of the control
. Watch the video explanation and learn the following content.
Adjust the size ratio of the control in the layout
. You can adjust it by setting the sizePolicy of the control. Please see the video explanation for the specific operation.
Adjust the spacing between controls
. To adjust the upper and lower spacing between controls, you can add a layout to the control, and then adjust the spacing by setting the upper and lower padding and margin of the layout. Please see the video for detailed instructions.
To adjust the left and right spacing of controls, you can control it by adding horizontal spacers, or you can adjust the
order of controls through the left and right margins
of the layout. Sometimes we need to adjust the up and down display order of controls in a layout, or the left and right display order. How to do this? ?
If there are two simple controls in the layout, usually just drag them directly.
But if it is a more complicated situation, for example,
you can click here to download a program interface code developed by students of Baiyue Heiyu's practical class. After unzipping, drag the main.ui interface file inside to Qt Designer.
If we want to make some modifications to the original interface, as shown in the figure below
You can try to create a new vertical layout yourself and drag the original two layouts into the vertical layout.
You will find that if you want to adjust the upper and lower display order of two layouts, dragging directly will often cause confusion in the interface.
How to do it? 本节讲解仅 内部学员 可见
It is recommended to click here for the interface layout steps
. Watch the video explanation and learn the following content. To lay out
the interface controls, Baiyue Heiyu’s experience is to follow the following steps.
- Don’t use any Layout first, place all controls on the interface according to their positions.
- Then start from the innermost layer to set the layout of the control.
- Gradually expand to the outer layer to set the layout of the control
- Finally, adjust the size ratio of the controls in the layout, giving priority to using the Layout's layoutStrentch property to control it.
Jumping from one window to another.
Friends often ask me how to display a window (such as the login window) when the program starts, and then enter another window after the operation.
The method is very simple, mainly to instantiate another window, display the new window, and close the old window.
As shown in the following code
from PySide2 import QtWidgets import sys class Window2(QtWidgets.QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('Window 2') centralWidget = QtWidgets.QWidget() self.setCentralWidget (centralWidget) button = QtWidgets.QPushButton('Button 2') grid = QtWidgets.QGridLayout(centralWidget) grid.addWidget(button) class MainWindow(QtWidgets.QMainWindow): def __init__(self): super().__init__() self .setWindowTitle('Window 1') centralWidget = QtWidgets.QWidget() self.setCentralWidget(centralWidget) button = QtWidgets.QPushButton('Open a new window') button.clicked.connect(self.open_new_window) grid = QtWidgets.QGridLayout(centralWidget ) grid.addWidget(button) def open_new_window(self): # Instantiate another window self.window2 = Window2() # Show the new window self.window2.show() # Close yourself self.close() if __name__ == ' __main__': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_())
Click here to download a sample code package for logging in and switching to the main window.
If you often need to To jump back and forth between two windows, you can use hide() the method to hide the window instead of closes() closing the window. This has another advantage: when the hidden window is displayed again, the original operation content is still saved and will not disappear.
Pop up a modal dialog box
Sometimes, we need to pop up a modal dialog box to enter some data and then return to the original window.
The so-called modal dialog box means that after this dialog box pops up, the original window is in an inoperable state. You can only continue when the modal dialog box is closed.
Refer to the following code
from PySide2 import QtWidgets import sys class MyDialog(QtWidgets.QDialog): def __init__(self): super().__init__() self.setWindowTitle('Modal Dialog') self.resize(500, 400) self. textEdit = QtWidgets.QPlainTextEdit(self) self.textEdit.setPlaceholderText("Please enter the salary table") self.textEdit.move(10, 25) self.textEdit.resize(300, 350) self.button = QtWidgets.QPushButton(' Statistics', self) self.button.move(380, 80) class MainWindow(QtWidgets.QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('Main Window') centralWidget = QtWidgets.QWidget () self.setCentralWidget(centralWidget) button = QtWidgets.QPushButton('Open modal dialog') button.clicked.connect(self.open_new_window) grid = QtWidgets.QGridLayout(centralWidget) grid.addWidget(button) def open_new_window(self) : # Instantiate a dialog class self.dlg = MyDialog() # Display the dialog box, the code is blocked here, # Wait until the dialog box is closed before continuing to execute self.dlg.exec_() if __name__ == '__main__ ': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_())
After-class exercises
VIP practical class students please contact the teacher to complete a data sampling program development , the interface is as follows
