PyQt: Change GUI Layout after button is clicked

Tyrell picture Tyrell · Dec 22, 2016 · Viewed 21.5k times · Source

Okay, I am jumping from Tkinter to PyQt, because PyQt is just so much more advanced, and nicer to work with. BUT! I am having some troubles here.

I am trying to change the GUI layout after I press one of my buttons on the main screen. I press the first button of the main GUI page, then I want it to go to another GUI page that I will create. I have been sitting here for hours trying to find some way to do this - no videos on YouTube, and I haven't found any stack-overflow pages that help. So I learnt that there is a Qt Designer program. I don't like programs like that, so please try to stay away from using that when answering.

PS: I don't want to be working with more than one .py file, but if there is no other way, I guess I'm going to have to do so.

Here is my code so far:

class Window(QtGui.QMainWindow):

    def __init__(self):
        super(Window, self).__init__()
        self.setGeometry(50, 50, 400, 450)
        self.setFixedSize(400,450)
        self.setWindowTitle(" Tool")
        self.setWindowIcon(QtGui.QIcon('PhotoIcon.png'))
        self.home()

    def home(self):
        ToolsBTN = QtGui.QPushButton('text', self)
        ToolsBTN.clicked.connect(ToolTab)
        ToolsBTN.move(50, 350)
        CPSBTN = QtGui.QPushButton('text', self)
        CPSBTN.clicked.connect(QtCore.QCoreApplication.instance().quit)
        CPSBTN.move(150, 350)
        CreatorBTN = QtGui.QPushButton('Creator', self)
        CreatorBTN.clicked.connect(QtCore.QCoreApplication.instance().quit)
        CreatorBTN.move(250, 350)
        self.show()

class ToolTab(QtGui.QMainWindow):

    def __init__2(self):
        super(ToolTab, self).__init__2()
        self.setGeometry(50, 50, 400, 450)
        self.setFixedSize(400,450)
        self.setWindowTitle(" Tool")
        self.setWindowIcon(QtGui.QIcon('PhotoIcon.png'))
        self.Toolsgui()

    def Toolsgui(self):
        CPSBTN = QtGui.QPushButton('123', self)
        CPSBTN.clicked.connect(QtCore.QCoreApplication.instance().quit)
        CPSBTN.move(150, 300)
        self.show()

def Run():
    app = QtGui.QApplication(sys.argv)
    GUI = Window()
    GUITOOL = ToolTab()
    sys.exit(app.exec_())

Run()

Answer

eyllanesc picture eyllanesc · Dec 22, 2016

The solution I propose is based on the function setupUi() that generates Qt Designer, this is responsible for creating the internal elements of the window.

import sys

from PyQt4.QtGui import QApplication, QMainWindow, QPushButton, QWidget
#For PyQt5 :
#from PyQt5.QWidgets import QApplication , QMainWindow , QPushButton , QWidget
class UIWindow(object):
    def setupUI(self, MainWindow):
        MainWindow.setGeometry(50, 50, 400, 450)
        MainWindow.setFixedSize(400, 450)
        MainWindow.setWindowTitle("UIWindow")
        self.centralwidget = QWidget(MainWindow)
        # mainwindow.setWindowIcon(QtGui.QIcon('PhotoIcon.png'))
        self.ToolsBTN = QPushButton('text', self.centralwidget)
        self.ToolsBTN.move(50, 350)
        MainWindow.setCentralWidget(self.centralwidget)


class UIToolTab(object):
    def setupUI(self, MainWindow):
        MainWindow.setGeometry(50, 50, 400, 450)
        MainWindow.setFixedSize(400, 450)
        MainWindow.setWindowTitle("UIToolTab")
        self.centralwidget = QWidget(MainWindow)
        self.CPSBTN = QPushButton("text2", self.centralwidget)
        self.CPSBTN.move(100, 350)
        MainWindow.setCentralWidget(self.centralwidget)


class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.uiWindow = UIWindow()
        self.uiToolTab = UIToolTab()
        self.startUIWindow()

    def startUIToolTab(self):
        self.uiToolTab.setupUI(self)
        self.uiToolTab.CPSBTN.clicked.connect(self.startUIWindow)
        self.show()

    def startUIWindow(self):
        self.uiWindow.setupUI(self)
        self.uiWindow.ToolsBTN.clicked.connect(self.startUIToolTab)
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MainWindow()
    sys.exit(app.exec_())

Start:

enter image description here

After button clicked:

enter image description here

After another button clicked:

enter image description here

and more elegant solution:

import sys

from PyQt4.QtGui import QApplication, QMainWindow, QPushButton, QWidget
#For PyQt5 :
#from PyQt5.QWidgets import QApplication , QMainWindow , QPushButton , QWidget

class UIWindow(QWidget):
    def __init__(self, parent=None):
        super(UIWindow, self).__init__(parent)
        # mainwindow.setWindowIcon(QtGui.QIcon('PhotoIcon.png'))
        self.ToolsBTN = QPushButton('text', self)
        self.ToolsBTN.move(50, 350)


class UIToolTab(QWidget):
    def __init__(self, parent=None):
        super(UIToolTab, self).__init__(parent)
        self.CPSBTN = QPushButton("text2", self)
        self.CPSBTN.move(100, 350)


class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setGeometry(50, 50, 400, 450)
        self.setFixedSize(400, 450)
        self.startUIToolTab()

    def startUIToolTab(self):
        self.ToolTab = UIToolTab(self)
        self.setWindowTitle("UIToolTab")
        self.setCentralWidget(self.ToolTab)
        self.ToolTab.CPSBTN.clicked.connect(self.startUIWindow)
        self.show()

    def startUIWindow(self):
        self.Window = UIWindow(self)
        self.setWindowTitle("UIWindow")
        self.setCentralWidget(self.Window)
        self.Window.ToolsBTN.clicked.connect(self.startUIToolTab)
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MainWindow()
    sys.exit(app.exec_())