How to pack QGridLayout

Alan Miller

I'm trying to create a grid of panels and I want them to be packed adjacent to each other with minimal spacing.
So I tried to apply the .setSpacing() and setContentsMargins() to all widgets in the hierarchy but they still get spaced out as seen below.

How do I figure out why they are being spaced out? I know the tiles are in adjacent columns, the print statemtent
says Adding content at 0,1. Adding content at 0,2 Adding content at 0,3 ...

        # GroupBox for Information
        self.infoGroupBox = QGroupBox(self.centralwidget, objectName="infoGroupBox")
        self.infoGroupBox.setGeometry(QRect(20, 660, 1600, 200))
        self.infoGroupBox.setContentsMargins(0, 0, 0, 0)

        self.infoGroupBox.setStyleSheet("QGroupBox { font-weight: bold; border: 2px solid #00FF00; }")
        
        self.gridLayoutWidget_2 = QWidget(self.infoGroupBox, objectName="gridLayoutWidget_2")
        self.gridLayoutWidget_2.setGeometry(QRect(0, 20, 1600, 190))
        
        self.infoGrid = QGridLayout(self.gridLayoutWidget_2, objectName="infoGrid")
        self.infoGrid.setSpacing(0)
        self.infoGrid.setContentsMargins(0, 0, 0, 0)

        category_label = QLabel("Ball Flight\nDetails")
        category_label.setFixedSize(80, 80)
        category_label.setAlignment(Qt.AlignmentFlag.AlignRight | Qt.AlignmentFlag.AlignVCenter)
        category_label.setStyleSheet("font-weight: bold;")
        self.infoGrid.addWidget(category_label, 0, 0, 1, 1)
        categories = ["Club\nSpeed", "Attack\nAngle", "Spin\nRate", "Carry\nDistance", "Club\nPath", "Face\nto Path", "Side\nSpin", "Back\nSpin"]
        values = [128, 15, 3000, 250, 270, 30, 200, 2500]

        row = 0
        for i in range(len(categories)):
            col=i+1
            print(f"Adding content at {row},{col}")
            tile_widget = QWidget()
            tile_widget.setFixedSize(80, 80)
            tile_layout = QVBoxLayout(tile_widget)
            tile_layout.setContentsMargins(0,0,0,0)
            tile_layout.setSpacing(0)
            name_label = QLabel(categories[i])
            name_label.setAlignment(Qt.AlignmentFlag.AlignCenter| Qt.AlignmentFlag.AlignBottom)
            name_label.setStyleSheet("font-weight: bold; color: black;")
            value_label = QLabel(str(values[i]))
            value_label.setAlignment(Qt.AlignmentFlag.AlignCenter| Qt.AlignmentFlag.AlignTop)
            value_label.setStyleSheet("font-weight: bold; font-size: 24px; color: white;")
            tile_layout.addWidget(name_label)
            tile_layout.addWidget(value_label)
            tile_widget.setStyleSheet("border: 1px solid lightblue; background-color: lightblue; border-radius: 10px;")

            self.infoGrid.addWidget(tile_widget, 0, col)  #, alignment=Qt.AlignmentFlag.AlignHCenter|Qt.AlignmentFlag.AlignVCenter
        
        self.setCentralWidget(self.centralwidget)

ChrisW67

You have nine fixed 80 pixel wide widgets, total 720px, that you are putting in a layout you are (attempting) to force to 1600px wide. The grid layout will put each widget in an equal 9th of the available width and will attempt to simultaneously meet any other constraints present. In this case it cannot possibly have no space between the widgets and it distributes the remaining space (approx 1600 - 720px) equally in between widgets.

Exactly what was the picture supposed to look like?

Alan Miller

ok, I kinda get it now. I can just add spacers left and right and set fixed widths to get what I wanted.
Namely, 8 80x80 pixel tiles packed together and centered along the middle of the 1600px width which is the middle of the 2 videos.

this gets me what I wanted:

       
        category_label = QLabel("Ball Flight\nDetails")
        category_label.setFixedSize(200, 80)
        category_label.setAlignment(Qt.AlignmentFlag.AlignRight | Qt.AlignmentFlag.AlignVCenter)
        category_label.setStyleSheet("font-weight: bold;")
        self.infoGrid.addWidget(category_label, 0, 0, 1, 1)

        categories = ["Club\nSpeed", "Attack\nAngle", "Spin\nRate", "Carry\nDistance", "Club\nPath", "Face\nto Path", "Side\nSpin", "Back\nSpin"]
        values = [128, 15, 3000, 250, 270, 30, 200, 2500]

        hSpace = QWidget();
        hSpace.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Minimum)
        self.infoGrid.addWidget(hSpace, 0, 1)

        row = 0
        for i in range(len(categories)):
            col=i+2
            print(f"Adding content at {row},{col}")
            tile_widget = QWidget()
            tile_widget.setFixedSize(80, 80)
            tile_layout = QVBoxLayout(tile_widget)
            tile_layout.setContentsMargins(0,0,0,0)
            tile_layout.setSpacing(0)
            name_label = QLabel(categories[i])
            name_label.setAlignment(Qt.AlignmentFlag.AlignCenter| Qt.AlignmentFlag.AlignBottom)
            name_label.setStyleSheet("font-weight: bold; color: black;")
            value_label = QLabel(str(values[i]))
            value_label.setAlignment(Qt.AlignmentFlag.AlignCenter| Qt.AlignmentFlag.AlignTop)
            value_label.setStyleSheet("font-weight: bold; font-size: 24px; color: white;")
            tile_layout.addWidget(name_label)
            tile_layout.addWidget(value_label)
            tile_widget.setStyleSheet("border: 1px solid lightblue; background-color: lightblue; border-radius: 10px;")
            self.infoGrid.addWidget(tile_widget, 0, col, alignment=Qt.AlignmentFlag.AlignHCenter|Qt.AlignmentFlag.AlignVCenter)
        
        hSpace = QWidget();
        hSpace.setFixedWidth(470)
        hSpace.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Minimum)
        self.infoGrid.addWidget(hSpace, 0, 10)