Tutorial de PyQt5 - BoxLayout

  1. Disposición de caja vertical - QVBoxLayout
  2. Caja horizontal - QHBoxLayout
  3. Centro de alineación horizontal

Vamos a introducir la disposición de la QBox como una disposición de caja horizontal, una disposición de caja vertical y los widgets de estiramiento.

Disposición de caja 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()

Dónde,

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

El QPushButton y el QLabel no se añaden a la ventana de la misma manera que lo hicimos en los últimos capítulos. Estos dos widgets se añadirán al diseño de la caja más tarde.

v_box = QtWidgets.QVBoxLayout()

Esto crea una disposición de caja vertical - QVBoxLayout - en la que los widgets añadidos a esta disposición estarán alineados verticalmente donde el primer widget añadido está encima de otros widgets.

No hace nada por el momento porque es sólo un contenedor donde vamos a poner nuestros widgets.

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

Añade el botón y la etiqueta a la disposición de la caja vertical v_box.

Si ejecutamos este código, obtendremos el botón y la etiqueta uno debajo del otro.

VBox PyQt5

Si cambias el tamaño de la ventana, verás que estos dos widgets ya no están alineados.

PyQt5 VBox_Change Tamaño de la ventana

Cambiaremos nuestro código para que se vea mejor.

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

Dónde,

h_box = QtWidgets.QHBoxLayout()

Crea una disposición de caja horizontal.

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

El widget addStretch() llena todo el espacio horizontal que puede. Dos tramos antes y después de la etiqueta ocupan tanto espacio como sea necesario para dejar la etiqueta justo en el medio de la caja horizontal.

PyQt5 VBox_HBox

Centro de alineación horizontal

Otra forma de alinear el widget en el centro es establecer la alineación del widget como 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()

Sólo añade dos líneas en comparación con el primer ejemplo anterior,

labelA.setAlignment(QtCore.Qt.AlignCenter)

El método setAlignment establece la alineación del widget y QtCore.Qt.AlignCenter son los parámetros de alineación del centro del módulo QtCore que deben ser importados al código.

Tiene exactamente el mismo diseño que el ejemplo anterior.

PyQt5 Horizontal AlignCenter