- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personStyliser 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;}}
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()
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.