Il existe deux façons de mettre en page dans PyQt5, le positionnement absolu et la classe de mise en page.
Ensuite, nous introduisons la mise en page de PyQt5, qui est principalement divisée en positionnement absolu et mise en page.
1. Positionnement absolu
Le programme spécifie la position et la taille (en pixels) de chaque contrôle.
Le positionnement absolu a les limitations suivantes :
- La taille et la position des champs ne changent pas si la fenêtre est redimensionnée
- Les applications auront un aspect différent sur différentes plates-formes
- Si vous changez la police, la mise en page de notre application change
- Si vous décidez de changer la mise en page, vous devez refaire entièrement la mise en page
par exemple:
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
lbl1 = QLabel('Zetcode', self)
lbl1.move(15, 10)
lbl2 = QLabel('tutorials', self)
lbl2.move(35, 40)
lbl3 = QLabel('for programmers', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('Absolute')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Dans cet exemple, nous définissons trois étiquettes et les déplaçons à la position correspondante par déplacement.
Peu importe comment nous redimensionnons la fenêtre, sa taille et sa position ne changent pas.
2. Classe de mise en page
1. Disposition de la boîte Disposition de la boîte
Créez des dispositions horizontales et verticales en utilisant respectivement QHBoxLayout et QVBoxLayout.
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton,
QHBoxLayout, QVBoxLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
okButton = QPushButton("OK")
cancelButton = QPushButton("Cancel")
testButton = QPushButton("test")
hbox = QHBoxLayout()
#hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Nous définissons trois boutons ok, annuler et tester. Où addStretch est le facteur d'étirement, qui détermine la distance de chaque contrôle lorsqu'il est étiré.
Dans cet exemple, trois boutons sont affichés dans le coin inférieur droit de la fenêtre en utilisant HBoxLayout et QVBoxLayout et en ajoutant un facteur d'étirement.
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)Créez une disposition horizontale et ajoutez un facteur d'étirement et trois boutons. Le stretch devant les deux boutons ajoute un espace rétractable. Cela les poussera vers la droite.
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)Créez une disposition verticale et ajoutez un facteur d'étirement pour faire apparaître la disposition horizontale en bas de la fenêtre.
self.setLayout(vbox) L'affichage final est le suivant :
2. Disposition des tableaux QGridLayout
Une disposition de table divise l'espace en lignes et en colonnes, créant une disposition de grille à l'aide de la classe QGridLayout.
import sys
from PyQt5.QtWidgets import (QWidget, QGridLayout,
QPushButton, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
grid = QGridLayout()
self.setLayout(grid)
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
positions = [(i,j) for i in range(5) for j in range(4)]
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Dans l'exemple, une grille de boutons est créée.
grid = QGridLayout()
self.setLayout(grid)Une instance de QGridLayout est créée et définit la disposition de la fenêtre de l'application.
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']Les libellés de ces boutons sont positionnés comme suit :
positions = [(i,j) for i in range(5) for j in range(4)]Crée une liste d'emplacements dans une grille.
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)Les boutons sont créés et ajoutés à la mise en page à l'aide de la méthode addWidget().
Les contrôles peuvent également s'étendre sur plusieurs lignes ou colonnes dans une grille, comme illustré par l'exemple dans le commentaire suivant.
import sys
from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit,
QTextEdit, QGridLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
title = QLabel('Title')
author = QLabel('Author')
review = QLabel('Review')
titleEdit = QLineEdit()
authorEdit = QLineEdit()
reviewEdit = QTextEdit()
grid = QGridLayout()
grid.setSpacing(10)
grid.addWidget(title, 1, 0)
grid.addWidget(titleEdit, 1, 1)
grid.addWidget(author, 2, 0)
grid.addWidget(authorEdit, 2, 1)
grid.addWidget(review, 3, 0)
grid.addWidget(reviewEdit, 3, 1, 5, 1)
self.setLayout(grid)
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Review')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Créez une fenêtre avec trois onglets, deux modifications de ligne et un widget d'édition de texte. Utilisez ensuite QGridLayout pour terminer la mise en page. Créez une disposition de grille et définissez l'espacement entre les composants. Lors de l'ajout d'un petit widget à la grille, vous pouvez fournir l'étendue des lignes et des colonnes du widget. Dans l'exemple, définissez l'étendue des lignes et des colonnes pour les widgets ajoutés à la disposition de la grille. L'étendue de ligne est définie sur 5 et l'étendue de colonne est définie sur 1.
La sortie ressemble à ceci :
Cet article est la quatrième partie de "Apprendre PyQt5 à partir de zéro" , j'espère que vous pourrez soutenir et apprendre ensemble !