pythonembedqstackedwidget

Embedding a custom widget into a stacked widget page WITHOUT using qtdesigner


I am trying to embed two custom widgets into the pages of a stacked widget on a dialog page. I have mocked up my problem using the main script dialog.py which has a stacked widget with two pages promoting widget_1_UI from widget_1.py and widget_2_UI from widget_2.py to each page, respectively. It doesn't throw any errors when run but also doesn't show the content from the two modules in the stacked widget.

Output of dialog.py

What I expect from dialog.py

dialog.py

from PyQt5 import QtCore, QtGui, QtWidgets

from widget_1 import widget_1_UI
from widget_2 import widget_2_UI

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setWindowTitle("Dialog")
        Dialog.resize(640, 480)
        
        self.verticalLayout = QtWidgets.QVBoxLayout(Dialog)        
        
        
        self.stackedWidget = QtWidgets.QStackedWidget(Dialog)
        
        
        self.page_1 = widget_1_UI()
        self.stackedWidget.addWidget(self.page_1)
        
        
        self.page_2 = widget_2_UI()
        self.stackedWidget.addWidget(self.page_2)
        
        
        self.verticalLayout.addWidget(self.stackedWidget)
        
        
        self.btn_nextPage = QtWidgets.QPushButton(Dialog)
        self.btn_nextPage.setText("PushButton")
        self.verticalLayout.addWidget(self.btn_nextPage)
        self.btn_nextPage.clicked.connect(self.nextPage)
        
        
    def nextPage(self):
        pageNum = self.stackedWidget.currentIndex()
        
        if pageNum == 0:
            self.stackedWidget.setCurrentIndex(1)
        else:
            self.stackedWidget.setCurrentIndex(0)
            
            
if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

widget_1.py

from PyQt5 import QtCore, QtGui, QtWidgets

class widget_1_UI(QtWidgets.QWidget):
    def setupUi(self, Form):
        Form.resize(614, 411)


        self.verticalLayout = QtWidgets.QVBoxLayout(Form)


        self.label = QtWidgets.QLabel(Form)
        font = QtGui.QFont()
        font.setPointSize(26)
        self.label.setFont(font)
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setText("AY YO BBY GRILL")
        self.verticalLayout.addWidget(self.label)
        
        
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setText("Dis one do nuffin")
        self.verticalLayout.addWidget(self.pushButton)

widget_2.py

from PyQt5 import QtCore, QtGui, QtWidgets

class widget_2_UI(QtWidgets.QWidget):
    def setupUi(self, Form):
        Form.resize(614, 411)


        self.verticalLayout = QtWidgets.QVBoxLayout(Form)


        self.label = QtWidgets.QLabel(Form)
        font = QtGui.QFont()
        font.setPointSize(26)
        self.label.setFont(font)
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setText("HOW YOU DOIN")
        self.verticalLayout.addWidget(self.label)
        
        
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setText("Dis do nuffin 2")
        self.verticalLayout.addWidget(self.pushButton)

Solution

  • Figured it out! In dialog.py widget_1_UI() is set as the promoted widget for the first page of the stacked widget but there is nothing to tell it what should be inside it. Adding self.page_1.setupUi(self.page_1) does just that.

    self.page_1 = widget_1_UI()
    self.page_1.setupUi(self.page_1)
    self.stackedWidget.addWidget(self.page_1)
    

    The same is applied to widget_2_UI.