Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does setColumnStretch and setRowStretch works

I have an application built using PySide2 which uses setColumnStretch for column stretching and setRowStretch for row stretching. It works well and good, but i am unable to understand how it is working. I refer to the qt docs, but it doesn't helped me. I am stuck on the two values inside those parenthesis.

For example :

glay = QtWidgets.QGridLayout(right_container)
glay.addWidget(lineedit, 0, 0)
glay.addWidget(button2, 0, 2)

glay.addWidget(widget, 2, 0, 1, 3)  

glay.addWidget(button, 4, 0)                                    
glay.addWidget(button1, 4, 2)

glay.setColumnStretch(1, 1)                                     # setColumnStretch
glay.setRowStretch(1, 1)                                        # setRowStretch
glay.setRowStretch(2, 2)                                        # setRowStretch
glay.setRowStretch(3, 1)                                        # setRowStretch

This produces the output as shown in the image below :

image

But how? What does these four values inside glay.addWidget(widget, 2, 0, 1, 3)do? Please explain me all this with examples.

like image 869
Abhay Salvi Avatar asked Apr 27 '20 03:04

Abhay Salvi


1 Answers

Short Answer: Read the Qt docs: https://doc.qt.io/qt-5/qgridlayout.html as it is clear and precise.

Long Answer:

  • addWidget():

    The addWidget method is overload (that concept exists natively in C++ but can be built in python but does not exist by default) which implies that a method (or function) has a different behavior depending on the arguments, in this case:

    void addWidget(QWidget *widget, int row, int column, Qt::Alignment alignment = Qt::Alignment())
    void addWidget(QWidget *widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = Qt::Alignment())
    

    The first method indicates that the widget will be placed in the position "row" and "column" that an item occupies, and in the second method the number of rows or columns that it occupies can be indicated, and they are equivalent to:

    def addWidget(self, row, column, rowSpan = 1, colSpan = 1, alignment = Qt.Alignment()):
        pass 
    

    So in lay.addWidget(widget, 2, 0, 1, 3) it means that "widget" will be placed at position 2x0 and will occupy 1 row and 3 columns.

    import random
    import sys
    
    from PyQt5 import QtGui, QtWidgets
    
    if __name__ == "__main__":
        app = QtWidgets.QApplication(sys.argv)
        w = QtWidgets.QWidget()
        glay = QtWidgets.QGridLayout(w)
        elements = (
            (0, 0, 1, 1),  # Position: 0x0 1 rowspan 1 colspan
            (1, 0, 1, 1),  # Position: 1x0 1 rowspan 1 colspan
            (0, 1, 2, 1),  # Position: 0x1 2 rowspan 1 colspan
            (2, 0, 1, 2),  # Position: 2x0 1 rowspan 2 colspan
        )
        for i, (row, col, row_span, col_span) in enumerate(elements):
            label = QtWidgets.QLabel("{}".format(i))
            color = QtGui.QColor(*random.sample(range(255), 3))
            label.setStyleSheet("background-color: {}".format(color.name()))
            glay.addWidget(label, row, col, row_span, col_span)
        w.resize(640, 480)
        w.show()
        sys.exit(app.exec_())
    

    enter image description here

  • setColumnStretch() and setRowStretch():

    By default if a QGridLayout is filled with the same widgets and the rowSpan and columnSpan are 1 then all the widgets will be the same size, but many times you want a widget to take up more space, or the sizes are proportional. To understand the logic I will use the following code:

    import random
    import sys
    
    from PyQt5 import QtGui, QtWidgets
    
    if __name__ == "__main__":
        app = QtWidgets.QApplication(sys.argv)
        w = QtWidgets.QWidget()
        glay = QtWidgets.QGridLayout(w)
        for i in range(3):
            for j in range(3):
                label = QtWidgets.QLabel("{}x{}".format(i, j))
                color = QtGui.QColor(*random.sample(range(255), 3))
                label.setStyleSheet("background-color: {}".format(color.name()))
                glay.addWidget(label, i, j)
        glay.setRowStretch(0, 1)
        glay.setRowStretch(1, 2)
        glay.setRowStretch(2, 3)
        w.resize(640, 480)
        w.show()
        sys.exit(app.exec_())
    

    enter image description here

    It was established that the stretch of the first column is 1, the second is 2 and the third is 3, which is the ratio of the size of the rows 1:2:3

    What happens if you set stretch to 0? Well, it will occupy the minimum size and those with a stretch > 0 will keep the proportion:

    glay.setRowStretch(0, 0)
    glay.setRowStretch(1, 1)
    glay.setRowStretch(2, 2)
    

    enter image description here

    The same concept applies to setColumnStretch().

like image 170
eyllanesc Avatar answered Oct 14 '22 00:10

eyllanesc