Problem with GridLayout widget stretching/sizing

Question

I'm trying to make a simple image editor GUI using the GridLayout. However, I am coming across a problem where the ratios between the image and the side panels are not what I want them to be. Currently, my code is:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *


class Window(QMainWindow):
    def __init__(self, parent = None):
        super().__init__(parent)

        self.setWindowTitle("PyEditor")
        self.setGeometry(100, 100, 500, 300)
        self.centralWidget = QLabel()
        self.setCentralWidget(self.centralWidget)
        self.gridLayout = QGridLayout(self.centralWidget)

        self.createImagePanel()
        self.createDrawPanel()
        self.createLayerPanel()

    def createImagePanel(self):
        imageLabel = QLabel(self)
        pixmap = QPixmap('amongus.png')
        imageLabel.setPixmap(pixmap)
        self.gridLayout.addWidget(imageLabel, 0, 0, 3, 4)

    def createDrawPanel(self):
        drawPanel = QLabel(self)
        drawLayout = QVBoxLayout()
        drawPanel.setLayout(drawLayout)

        tabs = QTabWidget()
        filterTab = QWidget()
        drawTab = QWidget()
        tabs.addTab(filterTab, "Filter")
        tabs.addTab(drawTab, "Draw")
        drawLayout.addWidget(tabs)

        self.gridLayout.addWidget(drawPanel, 0, 4, 1, 1)

    def createLayerPanel(self):
        layerPanel = QLabel(self)
        layerLayout = QVBoxLayout()
        layerPanel.setLayout(layerLayout)

        tab = QTabWidget()
        layerTab = QWidget()

        tab.addTab(layerTab, "Layers")
        layerLayout.addWidget(tab)
        self.gridLayout.addWidget(layerPanel, 1, 4, 1, 1)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec_())

This gives me the following window:

When I resize the window, only the filter/draw and layer panels are stretching, and not the image panel. I want to image panel to stretch as well and take up the majority of the window instead.

Answer 1

While theoretically every Qt widget could be used as a container, some widgets should not be used for such a purpose, as their size hints, size policies and resizing have different and specific behavior depending on their nature.

QLabel is intended as a display widget, not as a container. Everything related to its size is based on the content (text, image or animation), so the possible layout set for it will have no result in size related matters and will also create some inconsistencies in displaying the widgets added to that layout.

If a basic container is required, then basic QWidget is the most logical choice.

Then, if stretching is also a requirement, that should be applied using the widget or layout stretch factors. For QGridLayout, this is achieved by using setColumnStretch() or setRowStretch().

Trying to use the row or column span is not correct for this purpose, as the spanning only indicates how many grid "cells" a certain layout item will use, which only makes sense whenever there are widgets that should occupy more than one "cell", exactly like the spanning of a table.

So, the following changes are required to achieve the wanted behavior:

• change all QLabel to QWidget (except for the label that shows the image, obviously);

• use the proper row/column spans; the imageLabel should be added with only one column span (unless otherwise required):

  self.gridLayout.addWidget(imageLabel, 0, 0, 3, 1, alignment=Qt.AlignCenter)

• set a column stretch of (at least) 1 for the first column:

  self.gridLayout.setColumnStretch(0, 1)

• if you want the image to be center aligned in the available space, set the alignment on the widget (not when adding it to the layout):

  imageLabel = QLabel(self, alignment=Qt.AlignCenter)

Note that all the above will not scale the image whenever the available size is greater than that of the image. While you can set the scaledContents to True, the result will be that the image will be stretched to fill the whole available space, and unfortunately QLabel doesn't provide the ability to keep the aspect ratio. If you need that, then it's usually easier to subclass QWidget and provide proper implementation for size hint and paint event.

class ImageViewer(QWidget):
    _pixmap = None
    def __init__(self, pixmap=None, parent=None):
        super().__init__(parent)
        self.setPixmap(pixmap)

    def setPixmap(self, pixmap):
        if self._pixmap != pixmap:
            self._pixmap = pixmap
            self.updateGeometry()

    def sizeHint(self):
        if self._pixmap and not self._pixmap.isNull():
            return self._pixmap.size()
        return super().sizeHint()

    def paintEvent(self, event):
        if self._pixmap and not self._pixmap.isNull():
            qp = QPainter(self)
            scaled = self._pixmap.scaled(self.width(), self.height(), 
                Qt.KeepAspectRatio, Qt.SmoothTransformation)
            rect = scaled.rect()
            rect.moveCenter(self.rect().center())
            qp.drawPixmap(rect, scaled)