PyQt5 Qt designer QT designer uses tab widget and stacked widget to achieve multi-page switching
1. Use Qt designer (QT designer) for multi-page switching ui design
This article only provides a design idea to complete the simple page switching function, and does not involve the beautification of the page and the realization of complex business functions.
Click on the tab page to switch the tab page of the tab widget:
Click the radio button to drive stacked widget multi-page switching renderings:
Step-by-step instructions follow.
Open qt designer and create a new widget window.
Drag a tab widget into it
Right-click on the blank part of the window and select Vertical Layout in Layout
The tab widget only has 2 tabs by default. If you need more, you can insert new tab pages according to your needs. For example, here you want to insert a tab3 after tab2, then select tab2, then right-click, and select Insert after the current page
Adjust the title of the tab page according to your needs
Below we mainly carry out the main design of tab1 to illustrate the principle
Drag a Scroll Area on tab1, and prepare to put 3 parts in it. for drag display.
Set the size of the Scroll Area
In the Scroll Area, put 3 Frames, representing 3 modules
Click on the Scroll Area to lay it out vertically so that the 3 Frames can be neatly arranged
Set the stretching ratio of the 3 Frames to 1:1:1
Click each Frame in turn, right-click, select Change Style Sheet, and add a background color to it, so that the 3 Frames can be easily distinguished by naked eyes
The effect is as follows:
Then we design for the first Frame, the other two Frames, and so on, so that different content can be displayed through each Frame.
Drag a Stacked Widget into Frame1 to display 3 different pages
Then drag in a Widget to place 3 buttons
Select Frame1 and lay it out vertically
Set the height of the widget to 30
Then drag 3 radio buttons into this widget, and set their maximum height and width to 16
Right click on the widget to lay it out horizontally
Then place two horizontal springs on both sides of the three buttons in the widget to compress the three radio buttons to the middle
Because we have 3 radio buttons, the stacked widget provides 2 pages by default, we add one more, the method is the same as the above tab widget adding pages, these three radio buttons correspond to the 3 pages in the stacked widget respectively
We add a picture to each of the three pages in the stacked widget to distinguish them. After the addition is complete, at this time, click the two front and back arrows in the upper right corner, and you should be able to see that the page can be switched normally
I won’t go into details about how to add resource files here. We have created a new resource file here, named resource, and the corresponding file is the resource.qrc mentioned below.
After adding a picture to Frame, I deleted the original background color. So the background color added before will not be visible when running later.
This is the end of the ui design example for multi-page switching. Currently, the implementation of the page switching function is still missing.
2. Realize tab widget multi-page switching
Its implementation is relatively simple, just add the corresponding signal and slot functions on the ui page.
The signal is currentChanged(int), the slot function is setCurrentIndex(int)
3. Implement stacked widget multi-page switching
The multi-page switching of the stacked widget is driven by 3 radio buttons, whichever radio button is clicked, it will switch to a corresponding page of the stacked widget.
For this, we also need to set the signals and slots of the stacked widget, the same as the tab widget above. The signal is currentChanged(int), the slot function is setCurrentIndex(int)
But how to associate it with the radio button, for this we also need to manually be responsible for the emission of the currentChanged(int) signal. This will be reflected in the code.
4. Generate code
First, convert the resource file resource.qrc and ui file my_tab_widget.ui to py format.
# 将qrc资源文件编译为二进制文件
pyrcc5 -o resource_rc.py resource.qrc
# 将ui文件生成为相关的类
pyuic5 -o my_tab_widget.py my_tab_widget.ui
Here we generated resource_rc.py and my_tab_widget.py
It should be noted that since our resource file name is resource.qrc, after executing the following conversion command
pyuic5 -o my_tab_widget.py my_tab_widget.ui
At the end of the generated my_tab_widget.py, a sentence will be automatically generated:
import resource_rc
So when we convert the resource file resource.qrc, we need to specify its name as resource_rc.py, otherwise when the program is running, an error will be reported, indicating that the resource_rc module cannot be found.
After these tasks are done, we create a new main.py with the following content:
main.py
from PyQt5.QtWidgets import QApplication, QWidget
import sys
from my_tab_widget import Ui_Form
class MyUI(QWidget, Ui_Form):
def __init__(self):
super().__init__()
super().setupUi(self)
# 这里我们将radio button的clicked信号，绑定到自定义的槽函数上
self.radioButton.clicked.connect(self.radioButton_click_handler)
self.radioButton_2.clicked.connect(self.radioButton_2_click_handler)
self.radioButton_3.clicked.connect(self.radioButton_3_click_handler)
# 自定义的槽函数，用于发射stackedWidget的currentChanged信号，来驱动页面的切换
def radioButton_click_handler(self):
self.stackedWidget.currentChanged.emit(0)
def radioButton_2_click_handler(self):
self.stackedWidget.currentChanged.emit(1)
def radioButton_3_click_handler(self):
self.stackedWidget.currentChanged.emit(2)
if __name__ == '__main__':
app = QApplication(sys.argv)
my_widget = MyUI()
my_widget.show()
sys.exit(app.exec_())
In main.py, we customized a MyUI class, inherited from the ui interface we designed, and bound the clicked signal of the radio button to a custom slot function to emit the currentChanged signal of the stackedWidget to This drives the page switching of the stackedWidget.
5. Operation effect
Click the tab page to switch the tab page of the tab widget:
Click the radio button to drive stacked widget multi-page switching: