"PyQt5 Designer Quick Master" 02 The so-called stacked layout

This series is based on Designer’s PyQt tutorial. The original intention is to write code without writing code. The code and parameters involved are all generated by Designer. Readers who don’t know Designer can spend a few seconds to read "PyQt5 Write a Hammer" Code, the drawing is over" , I won’t repeat it in other chapters.

2.0 The so-called stack layout
2.1 Start drawing
2.2 Set the stack layout
2.3 Stack layout cross-window call
2.4 Summary Q&A

2.0 The so-called stacked layout

The so-called stacked layout, or switching pages, essentially consists of a main page and n sub-pages, emptying an area on the main page, and stacking the sub-pages into it. All sub-pages are arranged in the order of adding, click the corresponding button, switch to the corresponding page according to the sequence number.

Insert picture description here

2.1 Start drawing

step1 draw a frame

Create a new widget, add a groupBox on the left, put several buttons as the switch button, put a frame on the right to install the page, arrange the buttons and windows with a suitable layout, and use the spring (spacer) to top the button to the highest, according to your preference Set the spacing. Set your objectName for each button and save it for calling. It should be noted here that in addition to the frame, there is also a widget, and there is no difference between the two.
Insert picture description here

step2 draw a bunch of sub-pages

The subject matter is not limited, free to play, a few new widgets, set up the layout (not setting the layout is ugly, especially ugly), the same objectName for each page.
Insert picture description here

2.2 Set the stack layout

After drawing, generate the code and set the stacking layout. If you don’t understand, see the first part of this series, and there will be no prompts in the following chapters.

The following code note elements:

.addWidget() needs to pass in a window class, so each page needs to be inherited from QWidget
self.sender() Get the sender of the current signal, and get the corresponding index in the index dictionary

from PyQt5.QtWidgets import QApplication, QStackedLayout, QWidget

# 导入生成的 ui
from main_ui import Ui_main
from home_page import Ui_home_page
from blog_page import Ui_blog_page
from contact_page import Ui_contact_page


class FrameHomePage(QWidget, Ui_home_page):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class FrameBlogPage(QWidget, Ui_blog_page):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class FrameContactPage(QWidget, Ui_contact_page):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


class MainWidget(QWidget, Ui_main):
    """
    主窗口
    """
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        # 实例化一个堆叠布局
        self.qsl = QStackedLayout(self.frame)
        # 实例化分页面
        self.home = FrameHomePage()
        self.blog = FrameBlogPage()
        self.contact = FrameContactPage()
        # 加入到布局中
        self.qsl.addWidget(self.home)
        self.qsl.addWidget(self.blog)
        self.qsl.addWidget(self.contact)
        # 控制函数
        self.controller()

    def controller(self):
        self.pushButton_home.clicked.connect(self.switch)
        self.pushButton_blog.clicked.connect(self.switch)
        self.pushButton_contact.clicked.connect(self.switch)

    def switch(self):
        sender = self.sender().objectName()

        index = {
    
    
            "pushButton_home": 0,
            "pushButton_blog": 1,
            "pushButton_contact": 2,
        }

        self.qsl.setCurrentIndex(index[sender])

2.3 Calling across windows

As mentioned earlier, the stacked layout actually stacks a bunch of sub-windows in a designated area. Although only a single sub-window can be seen at a time, in essence, these sub-windows have been expanded and are waiting to be displayed, which means that there is a gap between these windows. The state is in the same time period, so you only need to pass an instantiated window control or the entire window as a parameter to another window for operation in the same domain (function space). The actual case is as follows:

A window with a text page and a button page is prepared, and the text page can be modified by the buttons of the button page. In the instantiation phase, textPage is passed to btnPage, and the corresponding btnPage must have a parameter to receive.

# 在实例化阶段把textPage传入到btnPage
self.textPage = TextPage()
self.btnPage = BtnPage(self.textPage)

# btnPage 接收并使用
class BtnPage(QWidget, Ui_btnsPage):
    def __init__(self, page):
        super().__init__()
        self.setupUi(self)
        self.textPage = page
        self.controller()

    def controller(self):
        self.pushButton_something.clicked.connect(self.write)
        self.pushButton_clear.clicked.connect(self.clear)

    def write(self):
        self.textPage.textEdit.setText("一堆文字啊")

    def clear(self):
        self.textPage.textEdit.setText('')

Insert picture description here

2.4 Summary

1 How is the stacking layout done?
Prepare a main window, a stack of sub-pages, set the stack layout to bind to the frame or widget, and switch through the setCurrent of the stack layout instance.
2 Can I use other forms to install besides frame?
can. For example, widget and frame inherit from widget and add functions to the shape, but there is no difference in the layout.
3 In cross-window calls, what does the so-called same domain (function space) specifically refer to?
In the current example, it refers to the main window. All sub-windows are maintained by the main window. As long as all sub-windows are in the same space and time in the same main window, they can naturally call each other.

I'm just a idiot, your likes will be my biggest motivation for updating