How to replace one layout with another in Qhboxlayout?

Question

I created two Qgridlayout, with 16 buttons each, numbered from 1 to 32. I stored the two Qgridlayout in a list (one at each list position). This list is inserted into a Qhboxlayout to display the buttons on the screen. In addition to this list with two button layouts, there are two more buttons (next/Previous) that will be used to change the list index and, consequently, change the buttons shown on the screen. The idea is that the layout list works like pages and the next and Previous buttons change these pages whenever they are pressed. After the program runs and displays the first layout of buttons (1 to 16), when pressing the next button the index of the list is incremented and the "page" is changed presenting the other layout of buttons (17 to 32), but when I press the Previous button the "page" does not change. The list index is decreasing, but does not change the buttons. How to solve this problem?

Below Page 1 of the list:

Below Page 2:

Follows the code:

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QGridLayout, QHBoxLayout
from PyQt5.QtCore import Qt


class App(QWidget):

    def __init__(self):
        super().__init__()
        self.title = 'Page Buttons'
        self.left = 100
        self.top = 100
        self.width = 225
        self.height = 225
        self.count_pages = 0
        self.pages_grid_list = [];  # pages list
        self.h_layout = None

        self.initUI()

    def initUI(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.left, self.top, self.width, self.height)

        count = 0
        for count_pages in range(0, 2):

            page_btns_grid_layout = QGridLayout()  # create page

            for x in range(0, 4):
                for y in range(0, 4):
                    print("page: {} - row: {} - column: {}".format(count_pages , x, y))

                    count = count + 1
                    button = QPushButton(str(count))
                    button.clicked.connect(self.get_coordinates_btn_clicked)

                    page_btns_grid_layout.addWidget(button, x, y, Qt.AlignCenter)

            self.pages_grid_list.append(page_btns_grid_layout)  # add page in pages list

        next_page_button = QPushButton('next')
        next_page_button.clicked.connect(self.next_page_action)

        previous_page_button = QPushButton('previous')
        previous_page_button.clicked.connect(self.previous_page_action)

        self.h_layout = QHBoxLayout(self)
        self.h_layout.addWidget(previous_page_button, 1, alignment=Qt.AlignHCenter)
        self.h_layout.addLayout(self.pages_grid_list[self.count_pages])
        self.h_layout.addWidget(next_page_button, 1, alignment=Qt.AlignHCenter)

        self.show()

    def get_coordinates_btn_clicked(self):
        button = self.sender()
        page_btns = self.pages_grid_list[self.count_pages]  # get current page to get coordinate button clicked
        idx = page_btns.indexOf(button)
        location = page_btns.getItemPosition(idx)
        print('coordinates: {}'.format(location[:2]))

    def next_page_action(self):
        self.count_pages = self.count_pages + 1

        if self.count_pages < len(self.pages_grid_list):
            old_page = self.h_layout.itemAt(1)  # get old page
            self.h_layout.removeItem(old_page)  # remove old page of current layout
            new_page = self.pages_grid_list[self.count_pages]  # change page
            self.h_layout.insertLayout(1, new_page)  # add new next page in current layout
        else:
            self.count_pages = len(self.pages_grid_list) - 1

    def previous_page_action(self):
        self.count_pages = self.count_pages - 1

        if self.count_pages >= 0:
            old_page = self.h_layout.itemAt(1)  # get old page
            self.h_layout.removeItem(old_page)  # remove old page of current layout
            new_page = self.pages_grid_list[self.count_pages]  # change page
            self.h_layout.insertLayout(1, new_page)  # add new previous page in current layout
        else:
            self.count_pages = 0


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = App()
    sys.exit(app.exec_())

I’m using Python 3.7, Pyqt5 5.14.2 and Windows 10.

Answer 1

Try

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QGridLayout, QHBoxLayout
from PyQt5.QtCore import Qt


class App(QWidget):
    def __init__(self):
        super().__init__()
        self.title = 'Page Buttons'
        self.left = 100
        self.top = 100
        self.width = 225
        self.height = 225
        self.count_pages = 0
        self.pages_grid_list = [];                                       # pages list QWidget
        self.h_layout = None

        self.initUI()

    def initUI(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.left, self.top, self.width, self.height)

        count = 0
        for count_pages in range(0, 2):

            page_btns_grid_widget = QWidget()                                # +++ QWidget
            page_btns_grid_layout = QGridLayout(page_btns_grid_widget)       # + page_btns_grid_widget

            for x in range(0, 4):
                for y in range(0, 4):
                    print("page: {} - row: {} - column: {}".format(count_pages , x, y))

                    count = count + 1
                    button = QPushButton(str(count))
                    button.clicked.connect(self.get_coordinates_btn_clicked)

                    page_btns_grid_layout.addWidget(button, x, y, Qt.AlignCenter)

#            self.pages_grid_list.append(page_btns_grid_layout)               # add page in pages list
            self.pages_grid_list.append(page_btns_grid_widget)                # +++

        next_page_button = QPushButton('next')
        next_page_button.clicked.connect(self.next_page_action)

        previous_page_button = QPushButton('previous')
        previous_page_button.clicked.connect(self.previous_page_action)

        self.h_layout = QHBoxLayout(self)
        self.h_layout.addWidget(previous_page_button, 1, alignment=Qt.AlignHCenter)

#        self.h_layout.addLayout(self.pages_grid_list[self.count_pages])         # ---
        self.h_layout.addWidget(self.pages_grid_list[self.count_pages])          # +++

        self.h_layout.addWidget(next_page_button, 1, alignment=Qt.AlignHCenter)

        self.show()

    def get_coordinates_btn_clicked(self):
        button = self.sender()
        print('coordinates: {}'.format(button.text()))                           # +++ button.text()

    def next_page_action(self):
        self.count_pages = self.count_pages + 1
        if self.count_pages < len(self.pages_grid_list):
            self.new_page(self.count_pages)
        else:
            self.count_pages = len(self.pages_grid_list) - 1

    def previous_page_action(self):
        self.count_pages = self.count_pages - 1
        if self.count_pages >= 0:
            self.new_page(self.count_pages)
        else:
            self.count_pages = 0

    def new_page(self, count_pages):                           # +++
        widget = self.h_layout.takeAt(1).widget()
        widget.hide()
        self.h_layout.insertWidget(1, self.pages_grid_list[count_pages])  
        self.pages_grid_list[count_pages].show()     


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = App()
    sys.exit(app.exec_())