Styliser une interface PySide6 avec les Stylesheets (QSS)
Styliser une interface PySide6 avec les Stylesheets (QSS)
1. Principe général
Les Stylesheets Qt (QSS) permettent de modifier l’apparence des widgets.
Leur syntaxe est très proche du CSS utilisé en développement web.
Grâce aux QSS, il est possible de :
- changer les couleurs ;
- modifier les polices ;
- ajouter des bordures ;
- créer des coins arrondis ;
- ajouter des marges ;
- ajouter des espacements ;
- personnaliser l’apparence des boutons, champs de saisie, labels, etc.
2. Syntaxe de base
1
2
3
widget.setStyleSheet("""
propriété: valeur;
""")
Exemple :
1
2
3
bouton.setStyleSheet("""
background-color: lightblue;
""")
3. Changer la couleur d’un bouton
1
2
3
4
5
6
bouton.setStyleSheet("""
QPushButton {
background-color: #4CAF50;
color: white;
}
""")
Résultat :
- fond vert ;
- texte blanc.
4. Ajouter des coins arrondis
1
2
3
4
5
6
7
bouton.setStyleSheet("""
QPushButton {
background-color: #4CAF50;
color: white;
border-radius: 10px;
}
""")
Résultat :
1
2
3
╭──────────────╮
│ Valider │
╰──────────────╯
5. Ajouter une bordure
1
2
3
4
5
champ.setStyleSheet("""
QLineEdit {
border: 2px solid gray;
}
""")
Résultat :
Le champ possède une bordure grise de 2 pixels.
6. Ajouter de l’espace intérieur (padding)
1
2
3
4
5
champ.setStyleSheet("""
QLineEdit {
padding: 8px;
}
""")
Résultat :
Le texte ne touche plus les bords du champ.
7. Bordure + coins arrondis + padding
1
2
3
4
5
6
7
champ.setStyleSheet("""
QLineEdit {
border: 1px solid gray;
border-radius: 8px;
padding: 6px;
}
""")
C’est probablement le style que tu utiliseras le plus souvent.
8. Modifier la couleur de fond d’une fenêtre
1
2
3
4
5
self.setStyleSheet("""
QWidget {
background-color: #f5f5f5;
}
""")
Résultat :
Fond gris très clair.
9. Modifier un QLabel
1
2
3
4
5
6
7
label.setStyleSheet("""
QLabel {
color: navy;
font-size: 18px;
font-weight: bold;
}
""")
Résultat :
- texte bleu foncé ;
- taille plus grande ;
- gras.
10. Changer la police
1
2
3
4
5
6
label.setStyleSheet("""
QLabel {
font-family: Arial;
font-size: 20px;
}
""")
11. Effet au survol de la souris
1
2
3
4
5
6
7
8
9
10
11
bouton.setStyleSheet("""
QPushButton {
background-color: #4CAF50;
color: white;
border-radius: 8px;
}
QPushButton:hover {
background-color: #45a049;
}
""")
Résultat :
Le bouton devient plus foncé lorsque la souris passe dessus.
12. Modifier tous les boutons de la fenêtre
1
2
3
4
5
6
7
8
self.setStyleSheet("""
QPushButton {
background-color: #2196F3;
color: white;
border-radius: 8px;
padding: 8px;
}
""")
Tous les boutons héritent automatiquement du style.
13. Ajouter de l’espace entre les widgets
1
layout.setSpacing(15)
Résultat :
15 pixels entre chaque widget.
14. Ajouter des marges
1
2
3
4
5
6
layout.setContentsMargins(
20,
20,
20,
20
)
Ordre :
1
gauche, haut, droite, bas
Résultat :
20 pixels libres autour du contenu.
15. Exemple complet de formulaire moderne
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
self.setStyleSheet("""
QWidget {
background-color: #f5f5f5;
}
QLabel {
font-size: 14px;
font-weight: bold;
}
QLineEdit {
border: 1px solid gray;
border-radius: 8px;
padding: 6px;
background-color: white;
}
QPushButton {
background-color: #4CAF50;
color: white;
border-radius: 8px;
padding: 8px;
}
QPushButton:hover {
background-color: #45a049;
}
""")
Avec seulement quelques lignes, ton interface devient beaucoup plus moderne.
16. Ce qu’il faut retenir
✅ background-color change la couleur de fond
✅ color change la couleur du texte
✅ border ajoute une bordure
✅ border-radius crée des coins arrondis
✅ padding ajoute de l’espace intérieur
✅ font-size modifie la taille du texte
✅ font-weight met le texte en gras
✅ hover modifie l’apparence lors du survol
Résumé
Propriété Utilisation
background-color Couleur de fond
color Couleur du texte
border Bordure
border-radius Coins arrondis
padding Espace intérieur
font-size Taille du texte
font-weight Texte gras
hover Effet au survol
spacing Espace entre widgets
contentsMargins Marge autour du layout
Pour moderniser rapidement une interface PySide6, les propriétés les plus utiles sont :
- border-radius
- padding
- background-color
- hover
- setSpacing()
- setContentsMargins()
Avec ces quelques outils, il est possible de transformer une interface très simple en une interface agréable et moderne.