Layout

Introducció#

Basic acaba amb dos problemes sense resoldre, i tots dos són el mateix problema.

El primer: una fitxa de dues columnes feta amb move, on l’etiqueta de l’esquerra es va fer més llarga i es va menjar el valor de la dreta.

El segon: la mateixa finestra feta més gran, amb tot el contingut quiet a dalt a l’esquerra i 300 píxels buits a sota.

Cap dels dos és culpa teva.

Són culpa de move, que col·loca un giny una vegada i se n’oblida.

I un cop l’has col·locat, tot el que passa després —que el text canviï, que la finestra creixi, que el sistema faci servir una altra tipografia— li passa pel damunt.

Una disposició —layout— no col·loca els ginys una vegada.

Els torna a col·locar cada vegada que alguna cosa canvia.

Tu li dius quina relació hi ha entre els ginys, i ella calcula els píxels.

Sempre. Cada vegada.

Aquesta pàgina té quatre disposicions i prou.

Amb aquestes quatre es fa qualsevol pantalla que hagis vist mai.

Entorn de treball#

Crea un projecte amb uv, tal com es fa a Project:

uv init pyside-layout
cd pyside-layout
uv add pyside6

En columna#

Comença pel primer problema de Basic: dues etiquetes amb el mateix pare que es dibuixaven una sobre l’altra.

QVBoxLayout les apila de dalt a baix.

from PySide6.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget

app = QApplication([])

window = QWidget()
window.setWindowTitle("Hello")
window.resize(480, 200)

layout = QVBoxLayout(window)
layout.addWidget(QLabel("Hello, world!"))
layout.addWidget(QLabel("Good morning!"))

window.show()
app.exec()

Les mateixes dues etiquetes, ara una sota l’altra, i cap move.

Mira les dues línies noves.

QVBoxLayout(window) crea la disposició i li diu quina finestra ha de governar.

addWidget hi afegeix un giny, i els va apilant en l’ordre en què els afegeixes.