Tutorial de PyQt5 - BoxLayout

Jinku Hu 30 enero 2023 18 enero 2020
  1. Disposición de caja vertical - QVBoxLayout
  2. Caja horizontal - QHBoxLayout
  3. Centro de alineación horizontal
Tutorial de PyQt5 - BoxLayout

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

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

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.

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

Author: Jinku Hu
Jinku Hu avatar Jinku Hu avatar

Founder of DelftStack.com. Jinku has worked in the robotics and automotive industries for over 8 years. He sharpened his coding skills when he needed to do the automatic testing, data collection from remote servers and report creation from the endurance test. He is from an electrical/electronics engineering background but has expanded his interest to embedded electronics, embedded programming and front-/back-end programming.

LinkedIn