PyQt5 Tutorial - BoxLayout

  1. Layout da Caixa Vertical - QVBoxLayout
  2. Caixa Horizontal - QHBoxLayout
  3. Centro de Alinhamento Horizontal

Vamos introduzir o layout da QBox como um layout de caixa horizontal, um layout de caixa vertical e os widgets stretch.

Layout da Caixa Vertical - 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()

Onde,

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

O QPushButton e o QLabel não são adicionados à janela da mesma forma que fizemos nos últimos capítulos. Estes dois widgets seriam adicionados ao layout da caixa mais tarde.

v_box = QtWidgets.QVBoxLayout()

Ele cria um layout de caixa vertical - QVBoxLayout que os widgets adicionados a este layout serão alinhados verticalmente onde o primeiro widget adicionado está em cima de outros widgets.

Ele não faz nada no momento porque é apenas um container onde vamos colocar nossos widgets.

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

Ele adiciona o botão e etiqueta ao layout vertical da caixa v_box.

Se executarmos este código, teremos o botão de pressão e a etiqueta um por baixo do outro.

PyQt5 VBox

Se você mudar o tamanho das janelas, você verá que esses dois widgets não estão mais alinhados.

PyQt5 VBox_Change Window Size (Tamanho da janela)

Vamos mudar o nosso código para o fazer parecer melhor.

Caixa Horizontal - 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()

Onde,

h_box = QtWidgets.QHBoxLayout()

Cria um layout de caixa horizontal.

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

O widget addStretch() preenche o máximo de espaço possível na horizontal. Dois trechos antes e depois da etiqueta ocupam todo o espaço necessário para deixar a etiqueta bem no meio da caixa horizontal.

PyQt5 VBox_HBox_HBox

Centro de Alinhamento Horizontal

Outra forma de alinhar o widget no centro é definir o alinhamento do widget para ser ‘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()

Ele só adiciona duas linhas em comparação com o primeiro exemplo acima,

labelA.setAlignment(QtCore.Qt.AlignCenter)

O método setAlignment define o alinhamento do widget e o QtCore.Qt.AlignCenter são os parâmetros de alinhamento central do módulo QtCore que devem ser importados para o código.

Ele tem exatamente o mesmo layout com o exemplo acima.

PyQt5 AlignCenter Horizontal