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) :
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) :
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 :
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 :
