Introduction
Dans ce guide, nous allons voir comment styliser une application PyQt .
Nous commencerons par les thèmes par défaut de PyQt et comment les modifier, avant de passer à l'utilisation de différents types de style personnalisé.
Thèmes PyQt par défaut
PyQt fonctionne avec des thèmes basés sur le système d'exploitation par défaut. Cela signifie que ne pas spécifier de thème donnera à l'application un aspect différent sur différents systèmes.
Votre application aura un aspect différent sur Windows 10 machine par opposition à un Linux machine.
Il existe de nombreux styles ou thèmes livrés avec PyQt, autres que les thèmes par défaut.
Pour conserver une apparence uniforme à notre application lors de la distribution sur plusieurs systèmes d'exploitation, nous voudrons changer le thème par défaut avec un thème pré-construit ou créer le nôtre. Vous pouvez également conserver une apparence native en fonction du système d'exploitation.
Vérifier tous les styles système disponibles
Étant donné que les styles système par défaut diffèrent d'un système à l'autre, tous les systèmes n'auront pas les mêmes styles par défaut disponibles.
Heureusement, PyQt a une fonction intégrée pour récupérer tous les styles disponibles, conservés dans un dictionnaire. Jetons un coup d'œil à tous les styles système disponibles :
# The QStyleFactory object holds all the default system styles.
from PyQt6.QtWidgets import QStyleFactory
print(QStyleFactory.keys())
Sur une machine Windows, cela renverra les trois styles suivants :
['windowsvista', 'Windows', 'Fusion']
Sous Linux, en revanche, il retournera :
['Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion']
Pour savoir quel style par défaut est appliqué à une application existante, vous pouvez accéder au objectName()
via app.style()
:
import sys
from PyQt6.QtWidgets import QApplication
app = QApplication(sys.argv)
print(app.style().objectName())
Le résultat, là encore, dépend de votre système d'exploitation :
windowsvista
Application de styles système aux applications PyQt6
Pour changer le style système par défaut en un autre style, nous pouvons utiliser le setStyle()
méthode sur le QApplication
instance,, avec un autre style comme argument.
Définissons le style par défaut sur Fusion
dans une petite application :
import sys
from PyQt6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
app = QApplication(sys.argv)
# Set the 'Fusion' system style
app.setStyle('Fusion')
# Create the parent Widget of the Widgets added to the layout
window = QWidget()
# Create the Vertical Box Layout Manager, setting window as parent by passing it in the constructor.
layout = QVBoxLayout(window)
# Create the button Widgets we will add to the layout.
# Add the button Widgets to the VerticalBoxLayout
layout.addWidget(QPushButton('One'))
layout.addWidget(QPushButton('Two'))
layout.addWidget(QPushButton('Three'))
layout.addWidget(QPushButton('Four'))
layout.addWidget(QPushButton('Five'))
# Show the parent Widget
window.show()
# Launch the application
sys.exit(app.exec())
Maintenant, cela applique le Fusion
feuille de style à nos éléments, en changeant leur apparence :
Styles PyQt6 personnalisés
Bien que ces styles soient vraiment sympas, vous pourriez avoir une vision différente de votre application. Que faire si vous souhaitez que les boutons soient rouges , mais conserver le reste de la feuille de style Fusion ?
De la même manière que vous pouvez styliser des pages HTML - vous pouvez également styliser des applications PyQt - inline et via les feuilles de style QSS .
Ajout d'un style en ligne aux applications PyQt6
Lorsque la quantité de code de style ne justifie pas un fichier QSS séparé et autonome, il est plus facile d'écrire du code de style en ligne, c'est-à-dire dans le fichier Python dans lequel réside votre application.
Semblable au style des pages HTML en ligne, ce n'est pas considéré comme la meilleure pratique, mais c'est bien pour le prototypage, les tests ou de très petites modifications.
Chaque QWidget
accepte un setStyleSheet()
fonction, qui accepte une chaîne CSS :
widget.setStyleSheet(
"""
CSS SYNTAX
"""
)
Par exemple, si nous voulons appliquer une couleur à un widget, définir sa famille de police et sa taille, nous pouvons simplement utiliser la syntaxe CSS trop familière :
...
button = QPushButton('One')
button.setStyleSheet(
"background-color: #262626; "
"font-family: times; "
"font-size: 20px;"
)
layout.addWidget(button)
Si nous remplacions le code d'ajout du bouton d'origine par celui-ci, l'application ressemblerait à :
Maintenant, si nous voulons styliser un autre composant, nous appliquons le setStyleSheet()
fonction à elle. Cela devient rapidement un problème si vous souhaitez styliser plusieurs composants...
Bien que vous puissiez appliquer le setStyleSheet()
fonction au QApplication
instance et appliquer le style globalement à l'ensemble de l'application. Cependant, si vous y êtes déjà, autant créer une nouvelle feuille de style personnalisée et l'utiliser à la place du code de style en ligne.
Créer des feuilles de style personnalisées
Les styles du système d'exploitation ne sont que des feuilles de style présentes dans différentes livraisons de PyQt. Rien ne vous empêche de définir votre propre feuille de style QSS spécialement conçue pour votre application.
De plus, l'utilisation de feuilles de style résout une myriade de problèmes pouvant survenir lors du style de vos composants en ligne, outre le fait qu'il est logique de séparer la logique métier du code de style.
Les fichiers QSS sont très similaires aux fichiers CSS - la seule différence est la façon dont vous identifiez les éléments que vous souhaitez styliser. Vous ne pouvez pas attribuer un identifiant unique à un certain widget pour le personnaliser individuellement. Vous devrez regrouper des pommes avec des pommes et styliser les types de widgets le même.
En option, vous pouvez également styliser les objets dans les widgets individuellement à partir du widget lui-même :
QPushButton {
background-color: blue;
}
QLabel#title {
font-size: 15px;
}
Le premier style définira notre couleur de fond pour tous le QPushButton
objets dans l'application.
Le deuxième style ne stylera que l'objet titre d'un QLabel
.
Pour inclure un fichier QSS à votre application, vous pouvez l'appliquer en lisant le fichier et en utilisant le QApplication.setStyleSheet(str)
fonction :
# Open the qss styles file and read in the css-alike styling code
with open('styles.qss', 'r') as f:
style = f.read()
# Set the stylesheet of the application
app.setStyleSheet(style)
En fait, ces fichiers ne sont que le conteneur de nos chaînes de style.
Styliser une application de démonstration
Avec tout cela à l'esprit, créons une feuille de style QSS simple et appliquons-la à une simple application de démonstration :
import sys
from PyQt6.QtWidgets import (QApplication, QTableWidget, QTableWidgetItem)
from PyQt6.QtGui import QColor
# Declare our table values
nordic_countries = [('Norway', 'Oslo', 'Yes'),
('Iceland', 'Reykjavik', 'Yes'),
('Denmark', 'Copenhagen', 'Yes'),
('Belgium', 'Brussels','No')]
# Create the Qt Application
app = QApplication(sys.argv)
# Create the QTableWidget Widget
table = QTableWidget()
# Set the row count of the table to the length of the 'nordic_countries' variable
table.setRowCount(len(nordic_countries))
# Since every country in our 'nordic_countries' variable has the same amount of attributes
# we take the amount (3) of the first country and use this as the number of columns
table.setColumnCount(len(nordic_countries[0]))
# Set the Horizontal headers using setHorizontalHeaderLabels()
table.setHorizontalHeaderLabels(['Country', 'Capital', 'Scandinavian?'])
# Loop through every country in our 'nordic_countries' variable
for i, (country, capital, scandinavian_bool) in enumerate(nordic_countries):
# Make a QTableWidgetItem --> acts as an item in a table
item_country = QTableWidgetItem(country)
item_capital = QTableWidgetItem(capital)
item_scandinavian_bool = QTableWidgetItem(scandinavian_bool)
# Set the value of the items
table.setItem(i, 0, item_country)
table.setItem(i, 1, item_capital)
table.setItem(i, 2, item_scandinavian_bool)
# Finally show the table
table.show()
# Open the sqq styles file and read in the css-alike styling code
with open('styles.qss', 'r') as f:
style = f.read()
# Set the stylesheet of the application
app.setStyleSheet(style)
# Launch the application
sys.exit(app.exec())
Et dans le styles.qss
fichier :
QTableWidget {
font-family: Titillium;
font-size: 20px;
}
QTableWidget::item {
background-color: #D3D3D3;
}
QTableWidget::item:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
border: 1px solid #bfcde4;
}
Conclusion
Dans ce guide, nous avons examiné comment styliser les applications PyQt6 en Python. Nous avons exploré les styles de système d'exploitation standard, comment les styliser à l'aide de code en ligne et comment créer des feuilles de style QSS personnalisées.