[FIXED] Custom QScrollArea

Issue

I have developed some functionality that generates the following rows of output: 6 QLabels with pixmaps assigned to them, as well as 6 additional QLabels with assigned text that are positioned over the pixmap QLabels. Below the above set of labels, I include an additional QLabel with more information, before the cycle repeats. Below is an example image:

The output generated is based on the length of the list object the function is pulling in and will sometimes be larger than can be displayed in the window. I've made several attempts to create a scroll area to add my output to, but nothing works to recreate the layout shown above. QVBoxLayout and QHBoxLayout will stack each individual QLabel separately, either vertically or horizontally, which isn't the visual I'm trying to create (as shown above). Below is an example of output that is longer than can be shown in the window:

Not sure if there's some other way to create the layout I'm trying to put together, but if anyone can figure out a solution that doesn't incorporate QVBoxLayout or QHBoxLayout for adding scroll bars to a window, that would be great. Below is the code that generates the incorrect output:

def create_sample_images(self, sample_numbers):

    # example of sample_numbers = [01,18,2022,1,2,3,4,5,6,2.0,$100 Million,Roll]

    # print(sample_numbers)
    # print(len(sample_numbers))

    # creating the scroll area, widget and vbox
    self.scroll = QScrollArea()
    self.widget = QWidget()
    self.vbox = QVBoxLayout()

    if len(sample_numbers) != 0:

        i = 1
        x = 40
        y = 75
        w = 100
        h = 100

        for item in sample_numbers:

            # print("Here is an item")

            result = item[3:9]
            datevalue = item[:3]
            jackpotvalue = item[10]
            outcome = item[11]
            historylabel = ["DATE: " + str(datevalue[0]) + '-' + str(datevalue[1])
                            + '-' + str(datevalue[2])
                            + '    |   ' + "PRIZE: " + jackpotvalue
                            + '    |   ' + "ROLL (NO WINNER)"]
            result.append(historylabel)

            # print(result)
            # print(type(result))
            # print(datevalue)
            # print(jackpotvalue)
            # print(outcome)
            # print(historylabel)

            for obj in result:

                # print("Here is an obj in item")

                self.outputlabel = QLabel(self)
                self.labeltext = QLabel(self)

                self.labeltext.setText(str(obj))
                self.labeltext.setAlignment(QtCore.Qt.AlignCenter)
                self.labeltext.setStyleSheet("QLabel { color : black; }")

                if i < 6:

                    self.pixmap = QPixmap(u":/graphics/Images/lottoball.png")

                else:

                    self.pixmap = QPixmap(u":/graphics/Images/lottoslip.jpg")

                self.outputlabel.setPixmap(self.pixmap)

                self.outputlabel.resize(self.pixmap.width(),
                                        self.pixmap.height())

                self.outputlabel.setGeometry(x, y, w, h)
                self.labeltext.setGeometry(x, y, w, h)

                # adding labels to vbox
                self.vbox.addWidget(self.outputlabel)
                self.vbox.addWidget(self.labeltext)

                x += 125
                i += 1

                if i == 7:

                    i += 1
                    x = 40
                    y += 125

                elif i > 7:

                    self.outputlabel.setPixmap(None)
                    self.labeltext.setText(historylabel[0])
                    self.labeltext.setStyleSheet("QLabel { color : white; }")
                    self.labeltext.adjustSize()

                    # adding label to vbox
                    self.vbox.addWidget(self.labeltext)

                    i = 1
                    x = 40
                    y += 50

                self.widget.setLayout(self.vbox)

                # Scroll Area Properties
                self.scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
                self.scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
                self.scroll.setWidgetResizable(True)
                self.scroll.setWidget(self.widget)

                self.setCentralWidget(self.scroll)

        self.show()

Below is an example of the bad output. All widgets are being stacked on top of each other and displayed vertically or horizontally (vbox/hbox):

Solution

you can use "gridlayout" or set limit for your items with use "setMinimumSize" below like this example

from PyQt5.QtWidgets import *
from PyQt5.QtCore import Qt



class main(QMainWindow):
    def __init__(self):
        super().__init__()


        self.scroll = QScrollArea()
        self.scroll.setVerticalScrollBarPolicy(Qt.ScrollBarPolicy.ScrollBarAlwaysOn)
        self.widget = QWidget()
        self.scroll.setWidgetResizable(True)

        # => grid set
        self.grid = QGridLayout(self.widget)
        self.grid.setContentsMargins(10,40,10,20)
        self.grid.setHorizontalSpacing(20)
        self.grid.setVerticalSpacing(10)

        for i in range(6):            
            for j in range(3):  
                if i % 2 == 1:
                    self.grid.addWidget(QLabel("DateTime => 01.19.2022  |  $400  |  ROLL"), i,j, 1,3)
                    break
                else:
                    self.label = QLabel("9")
                    self.label.setAlignment(Qt.AlignmentFlag.AlignCenter)
                    self.label.setStyleSheet("background-color: red;")

                    # => item set minimum size !
                    self.label.setMinimumSize(120,120)

                    self.grid.addWidget(self.label, i, j, 1,1)

        
        self.scroll.setWidget(self.widget)
        self.setCentralWidget(self.scroll)
        self.resize(600,550)
        self.show()



app = QApplication([])
window = main()
app.exec()

Answered By - SimoN SavioR