How do setColumnStretch and setRowStretch work?

Question

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 am stuck on the two values inside those parentheses.

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:

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

Answer 1

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_())
  

  

• 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_())
  

  

  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)
  

  

  The same concept applies to setColumnStretch().