PyQt5 BoxLayout

We’re going to introduce the QBox layout like a horizontal box layout, a vertical box layout and the stretch widgets.

Vertical Box Layout - QVBoxLayout

VBox.py
import sys
from PyQt5 import QtWidgets

def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Click!')
    labelA = QtWidgets.QLabel('Label Example')

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addWidget(labelA)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('PyQt5 Lesson 4')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

Where,

b = QtWidgets.QPushButton('Click!')
l = QtWidgets.QLabel('Label Example')

The QPushButton and QLabel are not added to the window the same as what we did in last chapters. These two widgets would be added to the box layout later.

v_box = QtWidgets.QVBoxLayout()

It creates a vertical box layout - QVBoxLayout that the widgets added to this layout will be aligned vertically where firstly added widget is on top of other widgets.

It doesn’t do anything at the moment because it’s just a container where we’re going to put our widgets.

v_box.addWidget(buttonA)
v_box.addWidget(lableA)

It adds the button and label to the vertical box layout v_box.

If we run this code, we will get the push button and the label one underneath the other.

PyQt5 VBox

If you change the windows size, you will see that these two widgets are not aligned any more.

PyQt5 VBox_Change Window Size

We will change our code to make it look better.

Horizontal Box - QHBoxLayout

VBox_HBox.py
import sys
from PyQt5 import QtWidgets


def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Push Me')
    labelA = QtWidgets.QLabel('Look at me')

    h_box = QtWidgets.QHBoxLayout()
    h_box.addStretch()
    h_box.addWidget(labelA)
    h_box.addStretch()

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addLayout(h_box)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('PyQt5 Lesson 4')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

Where,

h_box = QtWidgets.QHBoxLayout()

It creates a horizontal box layout.

h_box.addStretch()
h_box.addWidget(labelA)
h_box.addStretch()

The addStretch() widget fills up as much space horizontally as it can. Two stretches before and after the label take up as much space as need to leave the label right in the middle of the horizontal box.

PyQt5 VBox_HBox

Horizontal Alignment Center

Another way to align the widget in the center is set the alignment of the widget to be AlignCenter.

VBox_HorizontalAlignmentCenter.py
import sys
from PyQt5 import QtWidgets
from PyQt5 import QtCore


def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Click!')
    labelA = QtWidgets.QLabel('Label Example')
    labelA.setAlignment(QtCore.Qt.AlignCenter)

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addWidget(labelA)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('AlignCenter Example')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

It only adds two lines compared to the first example above,

labelA.setAlignment(QtCore.Qt.AlignCenter)

The setAlignment method sets the alignment of the widget and QtCore.Qt.AlignCenter is the center alignment parameters from QtCore module that should be imported to the code.

It has exactly the same layout with the example above.

PyQt5 Horizontal AlignCenter