Tutoriel PyQt5 - BoxLayout

Jinku Hu 30 janvier 2023 23 janvier 2020
  1. Disposition des boîtes verticales - QVBoxLayout
  2. Boîte horizontale - QHBoxLayout
  3. Centre d’alignement horizontal
Tutoriel PyQt5 - BoxLayout

Nous allons introduire la disposition des QBox comme une disposition de boîte horizontale, une disposition de boîte verticale et les widgets d’étirement.

Disposition des boîtes verticales - 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()

Où,

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

Le QPushButton et le QLabel ne sont pas ajoutés à la fenêtre comme nous l’avons fait dans les derniers chapitres. Ces deux widgets seront ajoutés à la disposition de la boîte plus tard.

v_box = QtWidgets.QVBoxLayout()

Cela crée une disposition verticale de la boîte - QVBoxLayout que les widgets ajoutés à cette disposition seront alignés verticalement où le premier widget ajouté est au-dessus des autres widgets.

Il ne fait rien pour le moment car c’est juste un conteneur où nous allons mettre nos widgets.

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

Il ajoute le bouton et le label au layout vertical de la v_box.

Si nous lançons ce code, nous aurons le bouton et le label l’un en dessous de l’autre.

PyQt5 VBox

Si vous changez la taille des fenêtres, vous verrez que ces deux widgets ne sont plus alignés.

PyQt5 VBox_Changez la taille de la fenêtre

Nous allons changer notre code pour qu’il ait meilleure allure.

Boîte horizontale - 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()

Où,

h_box = QtWidgets.QHBoxLayout()

Il crée une mise en page de boîte horizontale.

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

Le widget addStretch() remplit autant d’espace horizontalement qu’il le peut. Deux étirements avant et après l’étiquette prennent autant d’espace que nécessaire pour laisser l’étiquette au milieu de la boîte horizontale.

PyQt5 VBox_HBox

Centre d’alignement horizontal

Une autre façon d’aligner le widget au centre est de définir l’alignement du widget comme étant 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()

Cela n’ajoute que deux lignes par rapport au premier exemple ci-dessus,

labelA.setAlignment(QtCore.Qt.AlignCenter)

La méthode setAlignment définit l’alignement du widget et QtCore.Qt.AlignCenter est le paramètre d’alignement du centre du module QtCore qui doit être importé dans le code.

Il a exactement la même disposition avec l’exemple ci-dessus.

PyQt5 AlignCenter Horizontal

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