Layout en PyQT-5

A la hora de crear una Interfaz Gráfica de Usuario (GUI) disponemos de dos opciones en cuanto al posicionamiento de los controles (QWidget) estos pueden ser ubicados en un área establecida por las coordenadas (X, Y) o podemos optar por utilizar clases que administren la posición de los controles automáticamente.

Para empezar crearemos la GUI que se muestra en la imagen, primero utilizando posicionamiento absoluto, indicando las coordenadas (x, y) de cada QWidget y luego utilizando las clases layout disponibles en PyQT-5.


Usaremos los siguientes QWidget: QLabel para mostrar una etiqueta de texto, QLineEdit permite al usuario ingresar un texto y QPushButton crea un botón que puede ser presionado por el usuario.

Todos los controles serán ubicados utilizando el método move(x, y), donde podemos indicar la posición deseada.

w = QWidget()
w.setWindowTitle('Layout PyQT-5')
w.resize(250, 120)

lblName = QLabel("Nombre:", w)
lblName.move(20, 20)

lblPass = QLabel("Contraseña:", w)
lblPass.move(20, 50)

txtName = QLineEdit(w)
txtName.setPlaceholderText("Nombre de usuario")
txtName.move(100, 15)

txtPass = QLineEdit(w)
txtPass.setPlaceholderText("Contraseña de usuario")
txtPass.move(100, 45)

btnLogin = QPushButton("Login", w)
btnLogin.move(20, 80)
btnLogin.resize(218, 30)

w.show()

GUI con QGridLayout

QGridLayout permite ubicar su contenido en términos de filas y columnas, por lo que este es uno de los layouts más potentes que contiene el framework PyQT-5, para posicionar un control usamos addWidget(widget, x, y) para indicar el QWidget y la posición en términos de filas y columnas, para añadir el layout a la ventana usamos setLayout(layout).

lblName = QLabel("Nombre:")
txtName = QLineEdit()
txtName.setPlaceholderText("Nombre de usuario")

lblPass = QLabel("Contraseña:")
txtPass = QLineEdit(w)
txtPass.setPlaceholderText("Contraseña de usuario")

grid = QGridLayout()
grid.addWidget(lblName, 0, 0)
grid.addWidget(txtName, 0, 1)
grid.addWidget(lblPass, 1, 0)
grid.addWidget(txtPass, 1, 1)

btnLogin = QPushButton("Login", w)
grid.addWidget(btnLogin, 2, 0, 1, 2)

w.setLayout(grid)
w.show()

Como vemos hemos ubicado los QLabel en la primera columna, y los QLineEdit en la segunda, si observamos el QPushButton este ocupa ambas columnas por lo que al momento de agregar este control al grid, podemos indicarle cuantas columnas y cuantas filas ocupara a partir de la fila y columna en que este se ubique.

Este código: grid.addWidget(btnLogin, 2, 0, 1, 2), hace lo siguiente, agrega btnLogin al grid layout y lo ubica en la fila 2, columna 0, ocupando 1 fila y 2 columnas.

Uso de BoxLayout

Este layout nos permite organizar los controles en forma vertical (QVBoxLayout) y en forma horizontal (QHBoxLayout), vemos como agregar un grupo de botones de manera vertical y horizontal, además usamos addLayout(layout) para agregar un layout dentro de otro, vemos también el método setSpacing(20) que permite cambiar el espacio entre controles.

if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = QWidget()
    w.setWindowTitle('Layout PyQT-5')
    w.resize(250, 120)

    vbox = QVBoxLayout()
    vbox.setSpacing(20)

    for n in range(5):
        if n == 2:
            hbox = QHBoxLayout()
            for m in range(3):
                hbox.addWidget(QPushButton("Button #" + str(m)))
            vbox.addLayout(hbox)
        else:
            vbox.addWidget(QPushButton("Button #" + str(n)))

    w.setLayout(vbox)
    w.show()

    sys.exit(app.exec_())

GitHub: Layout en Python QT