Styliser l'application
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 l'application
Dans cette partie nous allons voir comment utiliser les feuilles de styles (dont la syntaxe est similaire à 99% à du CSS) pour changer la couleur et le look final de notre application et nos widgets.
Pour modifier la feuille de style d'un widget, on utilise la méthode setStyleSheet.
On commence avec la fenêtre de l'application, pour laquelle nous modifions la couleur de fond (background-color), la couleur du texte (color) et la taille de la police (font-size) :
self.setStyleSheet("""
background-color: rgb(20, 20, 20);
color: rgb(220, 220, 220);
font-size: 18px;
""")
On continue avec le QLineEdit pour lequel nous supprimons toutes les bordures (border: none).
Ensuite on modifie la police d'écriture (font-size et font-weight) et on ajoute également un padding pour que le texte ne soit pas collé aux bordures de la boîte de texte
On termine avec une légère bordure en bas du QLineEdit pour mieux la séparer visuellement des boutons (avec border-bottom) :
self.le_result.setStyleSheet("""
border: none;
border-bottom: 2px solid rgb(30, 30, 30);
padding: 0 8px;
font-size: 24px;
font-weight: bold;
""")
On continue avec les boutons pour lesquels nous appliquons une couleur d'arrière-plan s'il s'agit de boutons d'opérations, pour mieux les distinguer des nombres :
stylesheet = f"""
QPushButton {{background-color: {'#1e1e2d' if button_text in OPERATIONS else 'none'};
border: none;
font-weight: bold}}
QPushButton:pressed {{background-color: #f31d58;}}
"""
button.setStyleSheet(stylesheet)
On construit notre feuille de style avec un f-string et un opérateur ternaire pour cibler les boutons contenus dans la constante
OPERATIONS :background-color: {'#1e1e2d' if button_text in OPERATIONS else 'none'}
On modifie également la couleur des boutons lors du clique de la souris avec le modificateur
:pressed :QPushButton:pressed {{background-color: #f31d58;}}
!!!note
La variable stylesheet que nous avons définit étant un f-string, nous doublons les accolades à l'intérieur de la chaîne de caractères autour des propriétés.
Les propriétés CSS doivent en effet être entourées d'une accolade, mais dans un f-string les accolades sont déjà utilisées pour insérer du code Python à l'intérieur de la chaîne de caractères.
Nous devons donc doubler les accolades pour afficher une accolade à l'intérieur d'un f-string.
!!!
Et pour finir, on applique une couleur spécifique pour le bouton permettant de calculer le résultat :
self.buttons["="].setStyleSheet("background-color: #f31d58;")
Voici le code complet avec tous ces ajouts dans la méthode __init__ :
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")
# Stylesheet de la fenêtre principale
self.setStyleSheet("""
background-color: rgb(20, 20, 20);
color: rgb(220, 220, 220);
font-size: 18px;
""")
self.buttons = {}
self.main_layout = QGridLayout(self)
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)
# Stylesheet du QLineEdit
self.le_result.setStyleSheet("""
border: none;
border-bottom: 2px solid rgb(30, 30, 30);
padding: 0 8px;
font-size: 24px;
font-weight: bold;
""")
self.main_layout.addWidget(self.le_result, 0, 0, 1, 4)
for button_text, button_position in BUTTONS.items():
button = QPushButton(button_text)
button.setMinimumSize(48, 48)
button.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)
if button_text not in ["=", "C"]:
button.clicked.connect(self.number_or_operation_pressed)
# Stylesheet des QPushButton
stylesheet = f"""
QPushButton {{background-color: {'#1e1e2d' if button_text in OPERATIONS else 'none'};
border: none;
font-weight: bold}}
QPushButton:pressed {{background-color: #f31d58;}}
"""
button.setStyleSheet(stylesheet)
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)
# Stylesheet du bouton pour calculer le résultat.
self.buttons["="].setStyleSheet("background-color: #f31d58;")
self.connect_keyboard_shortcuts()
self.resize(400, 400)
@property
def result(self):
return self.le_result.text()
def number_or_operation_pressed(self):
if self.sender().text() in OPERATIONS:
if self.result[-1] in OPERATIONS or self.result == "0":
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:00 :Donc on a une calculatrice qui commence à ressembler à quelque chose, par contre on a encore un petit peu un style Windows 98avec des boutons gris et nous on va vouloir changer les couleurs de l'interfacepour avoir quelque chose qui est un peu plus moderne.
00:00:12 :Tout ça on va pouvoir le faire avec ce qu'on appelle des feuilles de style,donc c'est avec une syntaxe qui va se rapprocher grandement à 99% de ce qu'on pourrait avoir avec du CSS.
00:00:29 :Donc pour modifier la feuille de style d'un widget on va utiliser la méthode setStyleSheet.On va commencer avec la fenêtre principale de l'application,donc je vais le faire tout de suite après ici le setWindowTitleet on va faire un self.setStyleSheet comme ceci
00:00:50 :Donc pour mieux organiser les choses et ne pas avoir une ligne qui prend beaucoup de place,on va mettre une chaîne de caractère avec les trois guillemets ici.
00:00:57 :Donc qu'est-ce qu'on va faire et bien on va déjà changer la couleur de background,donc avec la propriété backgroundColor.Donc comme je vous dis c'est vraiment exactement la même chose que du CSS,donc si vous avez déjà fait du CSS vous ne devez pas être trop perdu.
00:01:08 :On va également changer la couleur du texte,donc avec color et on va mettre presque du blanc,donc on va mettre une valeur de RGB à 220.
00:01:15 :Pour le backgroundColor on a mis presque du noir,donc une valeur de RGB à 20, 20 et 20, ça donne un gris très foncé.Et on va également changer le fontSize,donc la taille de la police qu'on va mettre à 18 pixels.
00:01:26 :Donc je vais déjà vous montrer ce que ça donne, je lance le programmeet là on commence à avoir déjà un truc un peu plus moderne avec un style sombre.
00:01:33 :On a cependant encore pas mal de bordures qui sont présentes,donc notamment sur le lineEdit.Donc on va aborder le lineEdit tout de suite en modifiant également le styleSheet.
00:01:41 :Donc je vais aller dans le lineEdit ici et juste avant de l'ajouter,donc ça n'a pas forcément d'importance, on n'est pas obligé de le faire avant de l'ajouter,on pourrait le faire après également.
00:01:50 :Donc là je vais faire la même chose avec un setStyleSheetet avec une chaîne de caractère multiligne également,puisqu'on va avoir pas mal de choses à écrire.
00:01:58 :Donc la première chose c'est qu'on va enlever tous les bords,donc on va faire Border None.Ensuite on va rajouter un bord mais juste sur le bottom,pour séparer la boîte de texte des boutons qui sont juste en dessous.
00:02:09 :On va faire un 2 pixels solide et on va mettre un RGB à 30,donc qui sera un peu plus clair que le fond pour le distinguer.
00:02:17 :On va mettre un padding qui va être de 0 sur la largeur et de 8 pixels sur la hauteur.Donc on n'est pas obligé de mettre les 4 propriétés ici,on peut juste en mettre 2 et le premier 0 va correspondre à la gauche et la droiteet le 8 pixels va correspondre au haut et au bas du line edit.
00:02:32 :Donc si je relance, là vous voyez qu'on a bien un petit espace en haut et en bas du line edit.On va également changer le font size,on avait un font size de 18 pixels pour la base de notre application,donc ce qu'on a fait précédemment sur le widget,
00:02:45 :et là pour le line edit on va mettre 24 pixels pour qu'on voit un peu mieux le résultat de l'opération.On va également changer la police avec font weight,donc pour que le texte soit en gras et que ce soit un peu plus facile à lire.
00:02:57 :Donc si je lance l'application, vous voyez qu'on a bien le texte ici qui est un peu plus gros et qui est maintenant en gras.Et là pour les boutons on va avoir pas mal de choses à faire,puisqu'on va avoir une condition en fonction du type de bouton,puisqu'on va vouloir donner une couleur différente pour les symboles d'opération,
00:03:11 :donc plus, moins, égal et multiplication,et également pour le bouton qui va nous permettre de calculer le résultat.Donc je vais faire bouton.setStyleSheet là encore,
00:03:20 :avec encore une fois une chaîne de caractère multiligne,puisqu'on va avoir pas mal de choses à écrire,et je vais également le transformer en fString,donc en mettant un f devant les trois guillemets,pour pouvoir insérer des variables à l'intérieur de cette chaîne de caractère.
00:03:34 :Donc la première chose qu'on va faire c'est déjà cibler le QPushButton,donc comme ceci,puisque après en fait vous allez voir qu'on va également changer le QPushButtonPressed,donc quand on va appuyer sur le bouton,donc ça va être avec un autre signal,et pour distinguer le pushbutton du bouton quand il est pressé,
00:03:50 :et bien on va mettre le nom de la classe ici devant.Donc là on va cibler le QPushButton en général,et je vais mettre des doubles accolades,puisque en fait si vous mettez des simples accolades,là ça va être les accolades du fString,dans lequel on peut par exemple mettre du code Python,
00:04:04 :et là dans ce cas-ci en fait on veut mettre des accoladesqui vont définir le bloc de propriétés qui sont propres au QPushButton.Donc on met des doubles accolades,comme ça en fait la première accolade va échapper à la seconde,et au final dans notre chaîne de caractère,on aura l'équivalent d'une seule accolade.
00:04:18 :Donc je mets les doubles accolades ici,et à l'intérieur de ça, et bien on va mettre les propriétés du QPushButton.Donc la première chose qu'on va faire c'est enlever les bords,donc on va mettre border à none,on va également mettre le fond en bold comme avec le line edit,
00:04:32 :et on va changer le background color,mais le background color on va lui donner une couleur différenteen fonction du type de bouton.Donc pour ça en fait ce qu'on va faire c'est une condition,on va faire un opérateur ternaire,donc je vous montre tout ce que ça donne ici.
00:04:45 :On va dire avec les accolades ici,donc là vous voyez qu'on met une seule accolade,cette fois-ci pour insérer quelque chose qui va être dynamique.
00:04:52 :Donc on fait un opérateur ternaire ici,qu'est-ce qu'on fait, et bien on va mettre une couleursi le bouton texte est dans opération,donc ça, ça va cibler tous les boutons d'opération,et sinon on met none,donc on n'aura aucune couleur sur le bouton,et on va prendre la couleur d'arrière-plan de l'application
00:05:07 :par défaut qu'on a définie auparavant.Donc si je lance l'application,vous voyez qu'on a une couleur qui est différentepour les boutons d'opération que tout le reste des boutons,et on a également le bord qui a disparu.
00:05:17 :Donc on commence à avoir un truc qui est un peu plus moderne,et il ne reste plus maintenant qu'à modifierla couleur du bouton d'opération,donc ça on va le faire à la suite,après la boucle forward, donc par exemple ici,on va cibler notre bouton d'opérationcomme on l'avait fait ici pour connecter le signal,
00:05:32 :et on va modifier le style sheet.Donc on utilise cet style sheet là encore,et on va passer cette fois-ci une simple chaîne de caractèrequi va changer la couleur d'arrière-plan de ce bouton.
00:05:42 :Et dans ce cas-ci, on n'a pas besoin de rajouter le QPushButton devant,puisqu'on ne va pas modifier la couleurlorsqu'on clique sur le bouton.Et ça me fait remarquer que j'ai oublié de le faire ici.
00:05:51 :Donc là, quand on change le style sheet des boutons ici,on va rajouter une ligne, donc cette ligne ici,dans laquelle on spécifie que cette couleur de background,elle ne doit être appliquée que quand on clique sur le bouton,donc ça on le signale avec les deux pointset le mot pressed,
00:06:05 :et ça va nous permettre de donner une autre couleur,cette couleur ici, quand on va cliquer sur le bouton.Et vous voyez ici que j'ai remis les doubles accolades,puisque là ce n'est pas une expressionque l'on souhaite insérer à l'intérieur de la chaîne de caractère,mais bien une accolade qui va délimiter
00:06:17 :les propriétés associées au clic sur un bouton.Donc je vais vous montrer ce que ça donne.Je lance, j'ai bien la couleur du bouton d'égalité iciqui a été changée pour calculer l'opération,et si je clique sur un bouton, vous voyez quequand je clique et là je maintiens le clic,
00:06:31 :et bien on a bien cette couleur ici qui est différentelorsque je clique sur le bouton.Donc on va avoir la même chose quand je clique sur les opérations,et quand je clique sur le symbole d'égalité,là c'est la même couleur que j'ai mis pour les deux,donc ça ne fait aucune différence.
00:06:44 :Donc voilà qui termine cette application,vous voyez qu'on a quelque chose qui est quand même assez moderne,donc n'hésitez pas à changer tout ça,à vous amuser avec les stylesheets,il y a vraiment beaucoup de choses qu'on peut faire,et vous voyez qu'on arrive à avoir une applicationqui ressemble vraiment à ce qu'on pourrait avoir
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.
