Styliser les widgets
Exclusif Premium
Débloquez votre potentiel ! ✨
Cette session fait partie de notre programme Premium exclusif
+100h de formations exclusives
+180 exercices de code avancés
+100h de mentorats en réécriture
20 projets guidés pas à pas
Mentorats groupés hebdomadaires
Support individuel avec nos mentors
Prêt à passer au niveau supérieur ?
Découvrez tous les avantages Premium et transformez votre apprentissage dès aujourd'hui!
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compteStyliser les widgets
Dans cette partie on va voir comment nous pouvons modifier les widgets de l'application pour avoir un rendu un peu plus intéressant que le rendu actuel.
La première chose que nous allons faire c'est réduire les marges et l'espacement de notre QGridLayout.
Par défaut, un espace est en effet présent entre les widgets et autour du layout.
Pour réduire cet espace, on peut utiliser les méthodes setSpacing et setContentsMargins :
self.main_layout.setSpacing(0)
self.main_layout.setContentsMargins(10, 10, 10, 10)
Attaquons nous maintenant au QLineEdit.
Tout d'abord, on indique une hauteur minimum avec la méthode setMinimumHeight :
self.le_result.setMinimumHeight(50)
Ensuite, nous souhaitons aligner le texte à droite du QLineEdit. Pour ça, on peut utiliser les options d'alignement avec la méthode setAlignment et la constante du module QtCore.Qt.AlignRight du module QtCore :
self.le_result.setAlignment(QtCore.Qt.AlignRight)
Pour finir, nous allons modifier les boutons pour qu'ils aient une taille minimale et qu'ils puissent s'étendre en largeur et en hauteur quand on change la taille de la fenêtre.
On utilise tout d'abord la méthode setMinimumSize pour indiquer une taille minimum de 48 par 48 pixels :
button.setMinimumSize(48, 48)
Et pour finir on utilise le sizePolicy et la méthode
setSizePolicy pour modifier le comportement des boutons en cas de modification de la taille de la fenêtre :button.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)
!!!note
N'oubliez pas d'importer la classe QSizePolicy du module PySide6.QtWidgets au préalable :
from PySide6.QtWidgets import QSizePolicy
!!!
Avec QSizePolicy.Expanding on indique que l'on souhaite permettre aux boutons de prendre toute la largeur et la hauteur disponible à l'intérieur des cellules du QGridLayout.
Voici le code final de cette partie :
from PySide6 import QtCore
from PySide6.QtGui import QShortcut, QKeySequence
from PySide6.QtWidgets import QApplication, QWidget, QGridLayout, QLineEdit, QPushButton, QSizePolicy
BUTTONS = {"C": (1, 0, 1, 1),
"/": (1, 3, 1, 1),
"7": (2, 0, 1, 1),
"8": (2, 1, 1, 1),
"9": (2, 2, 1, 1),
"x": (2, 3, 1, 1),
"4": (3, 0, 1, 1),
"5": (3, 1, 1, 1),
"6": (3, 2, 1, 1),
"-": (3, 3, 1, 1),
"1": (4, 0, 1, 1),
"2": (4, 1, 1, 1),
"3": (4, 2, 1, 1),
"+": (4, 3, 1, 1),
"0": (5, 0, 1, 2),
".": (5, 2, 1, 1),
"=": (5, 3, 1, 1)}
OPERATIONS = ["+", "-", "/", "x"]
class Calculator(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Calculatrice")
self.buttons = {}
self.main_layout = QGridLayout(self)
# On réduit l'espacement et les marges
self.main_layout.setSpacing(0)
self.main_layout.setContentsMargins(0, 0, 0, 0)
self.le_result = QLineEdit("0")
self.le_result.setMinimumHeight(50)
self.le_result.setAlignment(QtCore.Qt.AlignRight)
self.le_result.setEnabled(False)
self.main_layout.addWidget(self.le_result, 0, 0, 1, 4)
for button_text, button_position in BUTTONS.items():
button = QPushButton(button_text)
# On définit une taille minimum
button.setMinimumSize(48, 48)
# On permet aux boutons de prendre toute la largeur et la hauteur possible
button.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)
if button_text not in ["=", "C"]:
button.clicked.connect(self.number_or_operation_pressed)
self.main_layout.addWidget(button, *button_position)
self.buttons[button_text] = button
self.buttons["C"].clicked.connect(self.clear_result)
self.buttons["="].clicked.connect(self.compute_result)
self.connect_keyboard_shortcuts()
@property
def result(self):
return self.le_result.text()
def number_or_operation_pressed(self):
# On empêche d'utiliser plusieurs fois de suite un symbole d'opération
if self.result[-1] in OPERATIONS and self.sender().text() in OPERATIONS:
return
# On empêche de commencer par un symbole d'opération
if self.result == "0" and self.sender().text() in OPERATIONS:
return
if self.result == "0":
self.le_result.clear()
self.le_result.setText(self.result + self.sender().text())
def clear_result(self):
self.le_result.setText("0")
def compute_result(self):
try:
result = eval(self.result.replace("x", "*"))
except SyntaxError:
return
self.le_result.setText(str(result))
def remove_last_character(self):
if len(self.result) > 1:
self.le_result.setText(self.result[:-1])
else:
self.le_result.setText("0")
def connect_keyboard_shortcuts(self):
for button_text, button in self.buttons.items():
QShortcut(QKeySequence(button_text), self, button.clicked.emit)
QShortcut(QKeySequence(QtCore.Qt.Key_Return), self, self.compute_result)
QShortcut(QKeySequence(QtCore.Qt.Key_Backspace), self, self.remove_last_character)
app = QApplication()
win = Calculator()
win.show()
app.exec()
00:00:10 :Donc on a vraiment quelque chose qui est 100% fonctionnel.Maintenant on va s'intéresser à styliser un petit peu notre application puisque pour l'instant elle n'est pas très belle.
00:00:18 :Et quand on change la taille de la fenêtre vous voyez qu'on a encore ces boutons ici qui prennent le minimum de place en hauteur.Et cette barre également de résultat qui a l'air d'être désactivée et qui ne prend pas toute la place en hauteur.
00:00:29 :Donc on va modifier tout ça et la première chose qu'on va faire c'est modifier également l'espace qui se trouve entre les boutons.Vous voyez que pour l'instant même si je réduis la taille de la fenêtre, on a un espace entre chaque bouton et on a également une marge tout autour de notre fenêtre.
00:00:42 :Donc on va modifier tout ça et on va le modifier sur notre layout.Donc je vais revenir là où je crée mon layout dans la méthode init.
00:00:49 :Après ce QGridLayout ici, on va utiliser deux méthodes.La méthode SetSpacing qui va nous permettre de réduire l'espace entre les différents widgets à l'intérieur du layout.
00:00:58 :Et la méthode SetContentsMargin qui va permettre de modifier les marges autour du layout.Donc on va faire MainLayout.SetSpacing et on va mettre ça à 0.
00:01:08 :Et on va faire MainLayout.SetContentsMargin.Donc attention il y a un S ici à Contents et là encore on n'oublie pas les majuscules.Donc la majuscule OC et la majuscule OM.
00:01:20 :Et on va mettre ici des valeurs de 0.Donc ça c'est pour le côté gauche, le côté en haut, à droite et en bas.Et on va mettre tout ça à 0.
00:01:27 :Et si je relance l'application, vous voyez qu'on n'a plus les marges autour de la calculette et on n'a bien aucun espace entre les boutons.Si j'augmente par contre la taille de la fenêtre, on a encore les boutons et le LineEdit qui ne prennent pas toute la place escomptée en hauteur.
00:01:40 :Donc on va modifier ça tout de suite et on va commencer par le LineEdit ici.On va lui donner en fait une taille minimum.Donc pour ça on va utiliser une méthode qui a un nom assez explicite qui est SetMinimumHeight.
00:01:52 :Et on va lui passer une taille minimale de 50 pixels.Donc si je relance l'application, vous voyez que le LineEdit prend au minimum 50 pixels en hauteur.
00:02:01 :Et si je change la taille de la fenêtre, ça va rester à cette taille minimale de 50 pixels.Donc ça permet d'avoir quelque chose qui est un peu plus grand.
00:02:15 :On va également changer l'alignement puisque pour l'instant le texte est à gauche du LineEdit.Et nous on va vouloir le mettre à droite.Donc pour ça on va utiliser là encore une méthode qui a un nom assez explicite qui est SetAlignment.
00:02:27 :Et on va utiliser dans le module QtCore une constante qui est AlignRight qui va nous permettre d'aligner le texte à droite.Donc AlignRight comme ceci.
00:02:36 :Par défaut c'est aligné à gauche et nous on veut l'aligner à droite.Donc si je relance là vous allez voir que cette fois-ci le texte est bien aligné à droite du LineEdit.
00:02:44 :Maintenant on va s'intéresser aux boutons.Donc les boutons pour l'instant vous voyez qu'ils sont assez petits donc on va également leur donner une taille minimale.
00:02:50 :Et cette fois-ci on va leur donner une taille minimale en largeur et en hauteur.Donc ça on va le rajouter ici par exemple après avoir créé le bouton.
00:02:58 :On va faire bouton.setMinimumSize et on va donner une taille minimale de 48 par 48.Donc là si je relance l'application vous voyez que ça commence un peu plus à ressembler à une calculatrice.
00:03:16 :Mais quand on continue comme ça et bien les boutons ne prennent toujours pas le maximum de taille en hauteur.Donc ça on va pouvoir le changer avec ce qu'on appelle le Size Policy.
00:03:25 :Le Size Policy c'est ce qui va permettre de définir le comportement des widgets.Donc chaque widget a un comportement par défaut.Vous voyez que pour les PushButton le comportement par défaut c'est que sur la largeur ils vont s'étendre pour prendre toute la place possible.
00:03:38 :Mais sur la hauteur ce n'est pas le cas.Donc on va devoir changer ce Size Policy.Pour ça on va utiliser une méthode qui s'appelle logiquement SetSizePolicy.
00:03:46 :Et le Size Policy il va falloir l'importer.Il est à l'intérieur du module QtWidget.Donc on va le taper et on va utiliser l'auto import de PyCharm avec option entrée.
00:03:55 :Et on va importer donc ce QSizePolicy.Et cette classe QSizePolicy elle dispose de plusieurs constantes.Nous celle qui nous intéresse c'est Expanding.Donc ça va signifier en fait que sur la largeur et la hauteur on souhaite que les boutons prennent le maximum de place.
00:04:09 :Donc là on va devoir le spécifier pour la largeur et pour la hauteur.Et donc pour les deux je mets Expanding.Par défaut le comportement pour les PushButton sur la largeur est déjà Expanding.
00:04:18 :Mais je vais quand même le remettre ici puisque cette méthode ici SetSizePolicy ça tend à avoir deux arguments.L'argument pour la largeur et pour la hauteur.
00:04:25 :Donc si je relance l'application vous allez voir que cette fois-ci si je change la taille de la fenêtre.Là on a bien les boutons qui prennent toute la taille qu'ils peuvent sur le GridLayout.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
