Exemples de feuilles de style de Qt

Nous allons maintenant étudier quelques exemples permettant de débuter dans l'utilisation des feuilles de style de Qt (Qt Style Sheets).

Usage des feuilles de style

Personnalisation des couleurs d'arrière-plan et de premier plan

Commençons par définir le jaune comme la couleur de fond de tous les QLineEdit présents dans notre application. Cela peut être effectué de la sorte :

 qApp->setStyleSheet("QLineEdit { background-color: yellow }");

Si nous voulons que la propriété soit appliquée uniquement sur les QLineEdit enfants (ou petits-enfants ou même petits-petits-enfants) de dialogues spécifiques, nous passerons plutôt par ceci :

 myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

Si nous voulons que la propriété soit appliquée uniquement sur un QLineEdit spécifique, nous pouvons lui donner un nom en utilisant QObject::setObjectName(), puis utiliser un sélectionneur d'ID se référant à lui :

 myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

Alternativement, nous pouvons définir la propriété background-color directement sur le QLineEdit, en omettant le sélectionneur :

 nameEdit->setStyleSheet("background-color: yellow");

Pour assurer un bon contraste, nous devrions également spécifier une couleur appropriée pour le texte :

 nameEdit->setStyleSheet("color: blue; background-color: yellow");

Changer les couleurs utilisées pour les sélections de textes serait également une bonne idée :

 nameEdit->setStyleSheet("color: blue;"
                         "background-color: yellow;"
                         "selection-color: yellow;"
                         "selection-background-color: blue;");

Personnalisation par l'utilisation de propriétés dynamiques

Il existe de nombreuses situations dans lesquelles nous avons besoin de présenter un formulaire comportant des champs obligatoires. Pour indiquer à l'utilisateur que le champ est obligatoire, une solution efficace (bien qu'esthétiquement douteuse) serait d'utiliser le jaune comme couleur de fond de ces champs. Il s'avère que ce genre de chose est extrêmement simple à implémenter avec les feuilles de style de Qt. Tout d'abord, nous pouvons utiliser la feuille de style suivante à l'échelle de l'application :

 *[mandatoryField="true"] { background-color: yellow }

Cela signifie que tout widget sur lequel la propriété Qt mandatoryField est définie à true devrait avoir un arrière-plan jaune.

Alors, pour chaque widget correspondant à un champ obligatoire, nous aurions simplement à créer au vol une propriété mandatoryField puis à la définir à true. Par exemple :

 QLineEdit *nameEdit = new QLineEdit(this);
 nameEdit->setProperty("mandatoryField", true);
 
 QLineEdit *emailEdit = new QLineEdit(this);
 emailEdit->setProperty("mandatoryField", true);
 
 QSpinBox *ageSpinBox = new QSpinBox(this);
 ageSpinBox->setProperty("mandatoryField", true);

Personnalisation d'un QPushButton par l'utilisation du modèle de boîtes

Cette fois-ci, nous allons montrer comment créer un QPushButton rouge. Ce QPushButton serait vraisemblablement connecté à un élément de code extrêmement destructeur.

Dans un premier temps, nous serions tenté d'utiliser cette feuille de style :

 QPushButton#evilButton { background-color: red }

Cependant, le résultat n'est pas satisfaisant, rendant uniquement un bouton plat sans bordures :

Voici ce qui se produit :

• nous avons effectué une requête pouvant ne pas être satisfaite par l'utilisation unique des styles natifs (par exemple, le moteur de thèmes Windows XP ne permet pas de spécifier la couleur de fond d'un bouton) ;
• par conséquent, le bouton est rendu en utilisant les feuilles de style ;
• nous n'avons pas spécifié de valeurs pour border-width et pour border-style, donc, par défaut, nous obtenons des bordures de 0 pixel de large de style none.

Améliorons la situation en spécifiant une bordure :

 QPushButton#evilButton {
     background-color: red;
     border-style: outset;
     border-width: 2px;
     border-color: beige;
 }

Les choses prennent une allure bien meilleure. Mais le bouton a l'air d'être un peu « à l'étroit ». Spécifions alors des espaces entre les bordures et le texte en utilisant le padding. De plus, nous allons imposer une largeur minimale, des coins arrondis et spécifier une police plus grande, afin de donner au bouton un meilleur aspect :

 QPushButton#evilButton {
     background-color: red;
     border-style: outset;
     border-width: 2px;
     border-radius: 10px;
     border-color: beige;
     font: bold 14px;
     min-width: 10em;
     padding: 6px;
 }

Le seul problème restant est que le bouton ne réagit pas quand on appuie dessus. Nous pouvons corriger cela en spécifiant une couleur de fond quelque peu différente et en utilisant un style de bordure différent :

 QPushButton#evilButton {
     background-color: red;
     border-style: outset;
     border-width: 2px;
     border-radius: 10px;
     border-color: beige;
     font: bold 14px;
     min-width: 10em;
     padding: 6px;
 }
 QPushButton#evilButton:pressed {
     background-color: rgb(224, 0, 0);
     border-style: inset;
 }

Personnalisation des sous-contrôles de l'indicateur de menu d'un QPushButton

Les sous-contrôles fournissent un accès aux sous-éléments d'un widget. Par exemple, un QPushButton associé à un menu (avec QPushButton::setMenu()) a un indicateur de menu. Personnalisons-le pour le bouton rouge :

 QPushButton#evilButton::menu-indicator {
     image: url(myindicator.png);
 }

Par défaut, l'indicateur de menu est situé dans le coin en haut à droite du rectangle de padding. Nous pouvons changer cela en spécifiant un subcontrol-position et une subcontrol-origin pour ancrer l'indicateur différemment. Nous pouvons aussi utiliser top et left pour déplacer l'indicateur de quelques pixels. Par exemple :

 QPushButton::menu-indicator {
     image: url(myindicator.png);
     subcontrol-position: right center;
     subcontrol-origin: padding;
     left: -2px;
 }

Cela positionne l'image myindicator.png centrée verticalement et à droite de padding du QPushButton (voir la propriété subcontrol-origin pour plus de détails).

L'exemple d'un sélectionneur complexe

Puisque le rouge semble être notre couleur préférée, assignons le rouge comme la couleur du texte des QLineEdit en définissant la feuille de style suivante à l'échelle de l'application :

 QLineEdit { color: red }

Cependant, nous aimerions donner une indication visuelle du fait qu'un QLineEdit est en lecture seule en faisant apparaître son texte en gris :

 QLineEdit { color: red }
 QLineEdit[readOnly="true"] { color: gray }

À un certain point, notre équipe de design vient nous voir en nous demandant que le texte de tous les QLineEdit du formulaire d'inscription (avec l'object name registrationDialog) soit marron :

 QLineEdit { color: red }
 QLineEdit[readOnly="true"] { color: gray }
 #registrationDialog QLineEdit { color: brown }

Quelques réunions de design IU plus tard, nous décidons que tous nos QDialog doivent avoir leurs QLineEdit colorés en marron :

 QLineEdit { color: red }
 QLineEdit[readOnly="true"] { color: gray }
 QDialog QLineEdit { color: brown }

Quiz : que se passe-t-il si nous avons un QLineEdit en lecture seule dans un QDialog ? Astuce : la section Résolution de conflits explique ce qu'il se passe dans des cas comme celui-ci.

Personnalisation de widgets spécifiques

Cette section fournit des exemples de personnalisation de widgets spécifiques par l'utilisation des feuilles de style.

Personnalisation de QAbstractScrollArea

L'arrière-plan de tout QAbstractScrollArea (vues d'éléments, QTextEdit et QTextBrowser) peut être défini en utilisant les propriétés d'arrière-plan. Par exemple, pour définir une image d'arrière-plan qui défile avec la barre de défilement :

 QTextEdit, QListView {
     background-color: white;
     background-image: url(draft.png);
     background-attachment: scroll;
 }

Si l'image d'arrière-plan doit être fixée au viewport :

 QTextEdit, QListView {
     background-color: white;
     background-image: url(draft.png);
     background-attachment: fixed;
 }

Personnalisation de QCheckBox

Le fait de styliser un QCheckBox est la plupart du temps identique au fait de styliser un QRadioButton. La différence principale est qu'un QCheckBox à trois états dont un est indéterminé.

 QCheckBox {
     spacing: 5px;
 }
 
 QCheckBox::indicator {
     width: 13px;
     height: 13px;
 }
 
 QCheckBox::indicator:unchecked {
     image: url(:/images/checkbox_unchecked.png);
 }
 
 QCheckBox::indicator:unchecked:hover {
     image: url(:/images/checkbox_unchecked_hover.png);
 }
 
 QCheckBox::indicator:unchecked:pressed {
     image: url(:/images/checkbox_unchecked_pressed.png);
 }
 
 QCheckBox::indicator:checked {
     image: url(:/images/checkbox_checked.png);
 }
 
 QCheckBox::indicator:checked:hover {
     image: url(:/images/checkbox_checked_hover.png);
 }
 
 QCheckBox::indicator:checked:pressed {
     image: url(:/images/checkbox_checked_pressed.png);
 }
 
 QCheckBox::indicator:indeterminate:hover {
     image: url(:/images/checkbox_indeterminate_hover.png);
 }
 
 QCheckBox::indicator:indeterminate:pressed {
     image: url(:/images/checkbox_indeterminate_pressed.png);
 }

Personnalisation de QComboBox

Nous allons étudier un exemple dont la liste déroulante d'un QComboBox apparaît comme « fusionnée » avec le cadre du QComboBox.

 QComboBox {
     border: 1px solid gray;
     border-radius: 3px;
     padding: 1px 18px 1px 3px;
     min-width: 6em;
 }
 
 QComboBox:editable {
     background: white;
 }
 
 QComboBox:!editable, QComboBox::drop-down:editable {
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                  stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
 }
 
 /* QComboBox gets the "on" state when the popup is open */
 QComboBox:!editable:on, QComboBox::drop-down:editable:on {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                 stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
 }
 
 QComboBox:on { /* shift the text when the popup opens */
     padding-top: 3px;
     padding-left: 4px;
 }
 
 QComboBox::drop-down {
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;
 
     border-left-width: 1px;
     border-left-color: darkgray;
     border-left-style: solid; /* just a single line */
     border-top-right-radius: 3px; /* same radius as the QComboBox */
     border-bottom-right-radius: 3px;
 }
 
 QComboBox::down-arrow {
     image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
 }
 
 QComboBox::down-arrow:on { /* shift the arrow when popup is open */
     top: 1px;
     left: 1px;
 }

La pop-up du QComboBox est un QAbstractItemView et est stylisée en utilisant le sélectionneur descendant :

 QComboBox QAbstractItemView {
     border: 2px solid darkgray;
     selection-background-color: lightgray;
 }

Personnalisation de QDockWidget

La barre de titre et les boutons d'un QDockWidget peuvent être personnalisés comme ceci :

 QDockWidget {
     border: 1px solid lightgray;
     titlebar-close-icon: url(close.png);
     titlebar-normal-icon: url(undock.png);
 }
 
 QDockWidget::title {
     text-align: left; /* align the text to the left */
     background: lightgray;
     padding-left: 5px;
 }
 
 QDockWidget::close-button, QDockWidget::float-button {
     border: 1px solid transparent;
     background: darkgray;
     padding: 0px;
 }
 
 QDockWidget::close-button:hover, QDockWidget::float-button:hover {
     background: gray;
 }
 
 QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
     padding: 1px -1px -1px 1px;
 }

Si l'on veut déplacer le dock widget à gauche, la feuille suivante peut être utilisée :

 QDockWidget {
     border: 1px solid lightgray;
     titlebar-close-icon: url(close.png);
     titlebar-normal-icon: url(float.png);
 }
 
 QDockWidget::title {
     text-align: left;
     background: lightgray;
     padding-left: 35px;
 }
 
 QDockWidget::close-button, QDockWidget::float-button {
     background: darkgray;
     padding: 0px;
     icon-size: 14px; /* maximum icon size */
 }
 
 QDockWidget::close-button:hover, QDockWidget::float-button:hover {
     background: gray;
 }
 
 QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
     padding: 1px -1px -1px 1px;
 }
 
 QDockWidget::close-button {
     subcontrol-position: top left;
     subcontrol-origin: margin;
     position: absolute;
     top: 0px; left: 0px; bottom: 0px;
     width: 14px;
 }
 
 QDockWidget::float-button {
     subcontrol-position: top left;
     subcontrol-origin: margin;
     position: absolute;
     top: 0px; left: 16px; bottom: 0px;
     width: 14px;
 }

Note : pour personnaliser le séparateur (gestion du redimensionnement) d'un QDockWidget, utilisez QMainWindow::separator.

Personnalisation de QFrame

Un QFrame est stylisé en utilisant le modèle de boîtes.

 QFrame, QLabel, QToolTip {
     border: 2px solid green;
     border-radius: 4px;
     padding: 2px;
     background-image: url(images/welcome.png);
 }

Personnalisation de QGroupBox

Considérons un exemple qui déplace le titre d'un QGroupBox vers le centre.

 QGroupBox {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #E0E0E0, stop: 1 #FFFFFF);
     border: 2px solid gray;
     border-radius: 5px;
     margin-top: 1ex; /* leave space at the top for the title */
 }
 
 QGroupBox::title {
     subcontrol-origin: margin;
     subcontrol-position: top center; /* position at the top center */
     padding: 0 3px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #FFOECE, stop: 1 #FFFFFF);
 }

Pour un QGroupBox pouvant être coché, utilisez le sous-contrôle {#indicator-sub}{::indicator} et stylisez-le tout comme vous styliseriez un QCheckBox (par exemple).

 QGroupBox::indicator {
     width: 13px;
     height: 13px;
 }
 
 QGroupBox::indicator:unchecked {
     image: url(:/images/checkbox_unchecked.png);
 }
 
 /* proceed with styling just like QCheckBox */

Personnalisation de QHeaderView

Un QHeaderView peut être personnalisé comme ci-dessous :

 QHeaderView::section {
     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                       stop:0 #616161, stop: 0.5 #505050,
                                       stop: 0.6 #434343, stop:1 #656565);
     color: white;
     padding-left: 4px;
     border: 1px solid #6c6c6c;
 }
 
 QHeaderView::section:checked
 {
     background-color: red;
 }
 
 /* style the sort indicator */
 QHeaderView::down-arrow {
     image: url(down_arrow.png);
 }
 
 QHeaderView::up-arrow {
     image: url(up_arrow.png);
 }

Personnalisation de QLineEdit

Le cadre d'un QLineEdit est stylisé en utilisant le modèle de boîtes. Pour créer un éditeur de lignes avec des coins arrondis, nous pouvons définir ceci :

 QLineEdit {
     border: 2px solid gray;
     border-radius: 10px;
     padding: 0 8px;
     background: yellow;
     selection-background-color: darkgray;
 }

Les caractères de mot de passe des éditeurs de ligne qui ont le mode d'écho QLineEdit::Password peuvent être stylisés avec :

 QLineEdit[echoMode="2"] {
     lineedit-password-character: 9679;
 }

L'arrière-plan d'un QLineEdit en lecture seule peut être modifié comme fait ci-dessous :

 QLineEdit:read-only {
     background: lightblue;

Personnalisation de QListView

La couleur de fond de lignes alternées peut être personnalisée en utilisant la feuille de style suivante :

 QListView {
     alternate-background-color: yellow;
 }

Pour fournir un arrière-plan spécial quand on survole des éléments, nous pouvons utiliser le sous-contrôle ::item. Par exemple :

 QListView {
     show-decoration-selected: 1; /* make the selection span the entire width of the view */
 }
 
 QListView::item:alternate {
     background: #EEEEEE;
 }
 
 QListView::item:selected {
     border: 1px solid #6a6ea9;
 }
 
 QListView::item:selected:!active {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #ABAFE5, stop: 1 #8588B2);
 }
 
 QListView::item:selected:active {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #6a6ea9, stop: 1 #888dd9);
 }
 
 QListView::item:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #FAFBFE, stop: 1 #DCDEF1);
 }

Personnalisation de QMainWindow

Le séparateur d'un QMainWindow peut être stylisé comme ceci :

 QMainWindow::separator {
     background: yellow;
     width: 10px; /* when vertical */
     height: 10px; /* when horizontal */
 }
 
 QMainWindow::separator:hover {
     background: red;
 }

Personnalisation de QMenu

Les éléments individuels d'un QMenu sont stylisés en utilisant le sous-contrôle item comme ceci :

 QMenu {
     background-color: #ABABAB; /* sets background of the menu */
     border: 1px solid black;
 }
 
 QMenu::item {
     /* sets background of menu item. set this to something non-transparent
         if you want menu color and menu item color to be different */
     background-color: transparent;
 }
 
 QMenu::item:selected { /* when user selects item using mouse or keyboard */
     background-color: #654321;
 }

Pour une personnalisation plus avancée, utilisez une feuille de style telle que celle qui suit :

 QMenu {
     background-color: white;
     margin: 2px; /* some spacing around the menu */
 }
 
 QMenu::item {
     padding: 2px 25px 2px 20px;
     border: 1px solid transparent; /* reserve space for selection border */
 }
 
 QMenu::item:selected {
     border-color: darkblue;
     background: rgba(100, 100, 100, 150);
 }
 
 QMenu::icon:checked { /* appearance of a 'checked' icon */
     background: gray;
     border: 1px inset gray;
     position: absolute;
     top: 1px;
     right: 1px;
     bottom: 1px;
     left: 1px;
 }
 
 QMenu::separator {
     height: 2px;
     background: lightblue;
     margin-left: 10px;
     margin-right: 5px;
 }
 
 QMenu::indicator {
     width: 13px;
     height: 13px;
 }
 
 /* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
 QMenu::indicator:non-exclusive:unchecked {
     image: url(:/images/checkbox_unchecked.png);
 }
 
 QMenu::indicator:non-exclusive:unchecked:selected {
     image: url(:/images/checkbox_unchecked_hover.png);
 }
 
 QMenu::indicator:non-exclusive:checked {
     image: url(:/images/checkbox_checked.png);
 }
 
 QMenu::indicator:non-exclusive:checked:selected {
     image: url(:/images/checkbox_checked_hover.png);
 }
 
 /* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
 QMenu::indicator:exclusive:unchecked {
     image: url(:/images/radiobutton_unchecked.png);
 }
 
 QMenu::indicator:exclusive:unchecked:selected {
     image: url(:/images/radiobutton_unchecked_hover.png);
 }
 
 QMenu::indicator:exclusive:checked {
     image: url(:/images/radiobutton_checked.png);
 }
 
 QMenu::indicator:exclusive:checked:selected {
     image: url(:/images/radiobutton_checked_hover.png);
 }

Personnalisation de QMenuBar

Un QMenuBar est stylisé comme ceci :

 QMenuBar {
     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                       stop:0 lightgray, stop:1 darkgray);
 }
 
 QMenuBar::item {
     spacing: 3px; /* spacing between menu bar items */
     padding: 1px 4px;
     background: transparent;
     border-radius: 4px;
 }
 
 QMenuBar::item:selected { /* when selected using mouse or keyboard */
     background: #a8a8a8;
 }
 
 QMenuBar::item:pressed {
     background: #888888;
 }

Personnalisation de QProgressBar

Les propriétés border, chunk et text-align de QProgressBar peuvent être personnalisées en utilisant les feuilles de style. Cependant, si une propriété ou un sous-contrôle est personnalisé, toutes les autres propriétés ou sous-contrôles doivent être eux aussi personnalisés.

Par exemple, nous changeons la border en gris et le chunk en bleu ciel.

 QProgressBar {
     border: 2px solid grey;
     border-radius: 5px;
 }
 
 QProgressBar::chunk {
     background-color: #05B8CC;
     width: 20px;
 }

Cela conserve le text-align, que nous personnalisons en positionnant le texte au centre de la barre de progression :

 QProgressBar {
     border: 2px solid grey;
     border-radius: 5px;
     text-align: center;
 }

Une marge peut être incluse pour obtenir des tronçons plus visibles.

Dans la capture d'écran ci-dessus, nous utilisons une marge de 0.5 pixels.

 QProgressBar::chunk {
     background-color: #CD96CD;
     width: 10px;
     margin: 0.5px;
 }

Personnalisation de QPushButton

Un QPushButton est stylisé comme ceci :

 QPushButton {
     border: 2px solid #8f8f91;
     border-radius: 6px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #f6f7fa, stop: 1 #dadbde);
     min-width: 80px;
 }
 
 QPushButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #dadbde, stop: 1 #f6f7fa);
 }
 
 QPushButton:flat {
     border: none; /* no border for a flat push button */
 }
 
 QPushButton:default {
     border-color: navy; /* make the default button prominent */
 }

Pour un QPushButton comportant un menu, utilisez le sous-contrôle ::menu-indicator.

 QPushButton:open { /* when the button has its menu open */
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #dadbde, stop: 1 #f6f7fa);
 }
 
 QPushButton::menu-indicator {
     image: url(menu_indicator.png);
     subcontrol-origin: padding;
     subcontrol-position: bottom right;
 }
 
 QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
     position: relative;
     top: 2px; left: 2px; /* shift the arrow by 2 px */
 }

Les QPushButton pouvant être cochés ont le pseudo-état :checked défini.

Personnalisation de QRadioButton

L'indicateur d'un QRadioButton peut être changé en utilisant ceci :

 QRadioButton::indicator {
     width: 13px;
     height: 13px;
 }
 
 QRadioButton::indicator::unchecked {
     image: url(:/images/radiobutton_unchecked.png);
 }
 
 QRadioButton::indicator:unchecked:hover {
     image: url(:/images/radiobutton_unchecked_hover.png);
 }
 
 QRadioButton::indicator:unchecked:pressed {
     image: url(:/images/radiobutton_unchecked_pressed.png);
 }
 
 QRadioButton::indicator::checked {
     image: url(:/images/radiobutton_checked.png);
 }
 
 QRadioButton::indicator:checked:hover {
     image: url(:/images/radiobutton_checked_hover.png);
 }
 
 QRadioButton::indicator:checked:pressed {
     image: url(:/images/radiobutton_checked_pressed.png);
 }

Personnalisation de QScrollBar

Un QScrollBar peut être stylisé en utilisant ses sous-contrôles, comme handle, add-line, sub-line et ainsi de suite. Notez que si une propriété ou un sous-contrôle est personnalisé, toutes les autres propriétés et tous les autres sous-contrôles doivent être personnalisés à leur tour.

La barre de défilement ci-dessus a été stylisée en bleu vert avec une bordure solide grise.

 QScrollBar:horizontal {
     border: 2px solid grey;
     background: #32CC99;
     height: 15px;
     margin: 0px 20px 0 20px;
 }
 QScrollBar::handle:horizontal {
     background: white;
     min-width: 20px;
 }
 QScrollBar::add-line:horizontal {
     border: 2px solid grey;
     background: #32CC99;
     width: 20px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 }
 
 QScrollBar::sub-line:horizontal {
     border: 2px solid grey;
     background: #32CC99;
     width: 20px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }

Les sous-contrôles left-arrow et right-arrow ont une bordure solide grise avec un arrière-plan blanc. Comme alternative, vous pouvez également embarquer l'image d'une flèche.

 QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }
 
 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
 }

Si vous voulez que les boutons de défilement de la barre de défilement soient placés ensemble (au lieu d'être placés sur les bords) comme sous Mac OS X, vous pouvez utiliser la feuille de style suivante :

 QScrollBar:horizontal {
     border: 2px solid green;
     background: cyan;
     height: 15px;
     margin: 0px 40px 0 0px;
 }
 
 QScrollBar::handle:horizontal {
     background: gray;
     min-width: 20px;
 }
 
 QScrollBar::add-line:horizontal {
     background: blue;
     width: 16px;
     subcontrol-position: right;
     subcontrol-origin: margin;
     border: 2px solid black;
 }
 
 QScrollBar::sub-line:horizontal {
     background: magenta;
     width: 16px;
     subcontrol-position: top right;
     subcontrol-origin: margin;
     border: 2px solid black;
     position: absolute;
     right: 20px;
 }
 
 QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
     width: 3px;
     height: 3px;
     background: pink;
 }
 
 QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
 }

La barre de défilement utilisant la feuille de style située ci-dessus ressemble à ceci :

Pour personnaliser une barre de défilement verticale, utilisez une feuille de style similaire à celle qui suit :

  QScrollBar:vertical {
      border: 2px solid grey;
      background: #32CC99;
      width: 15px;
      margin: 22px 0 22px 0;
  }
  QScrollBar::handle:vertical {
      background: white;
      min-height: 20px;
  }
  QScrollBar::add-line:vertical {
      border: 2px solid grey;
      background: #32CC99;
      height: 20px;
      subcontrol-position: bottom;
      subcontrol-origin: margin;
  }
 
  QScrollBar::sub-line:vertical {
      border: 2px solid grey;
      background: #32CC99;
      height: 20px;
      subcontrol-position: top;
      subcontrol-origin: margin;
  }
  QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
      border: 2px solid grey;
      width: 3px;
      height: 3px;
      background: white;
  }
 
  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
      background: none;
  }

Personnalisation de QSizeGrip

Un QSizeGrip est couramment stylisé uniquement par la définition d'une image :

 QSizeGrip {
     image: url(:/images/sizegrip.png);
     width: 16px;
     height: 16px;
 }

Personnalisation de QSlider

Vous pouvez styliser un slider horizontal comme fait ci-dessous :

 QSlider::groove:horizontal {
     border: 1px solid #999999;
     height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
     margin: 2px 0;
 }
 
 QSlider::handle:horizontal {
     background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
     border: 1px solid #5c5c5c;
     width: 18px;
     margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
     border-radius: 3px;
 }

Si vous souhaitez changer la couleur des éléments du slider avant et après sa manipulation, vous pouvez utiliser les sous-contrôles add-page et sub-page. Par exemple, pour un slider vertical :

 QSlider::groove:vertical {
     background: red;
     position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
     left: 4px; right: 4px;
 }
 
 QSlider::handle:vertical {
     height: 10px;
     background: green;
     margin: 0 -4px; /* expand outside the groove */
 }
 
 QSlider::add-page:vertical {
     background: white;
 }
 
 QSlider::sub-page:vertical {
     background: pink;
 }

Personnalisation de QSpinBox

Un QSpinBox peut être complètement personnalisé comme ci-dessous (la feuille de style est commentée ligne par ligne) :

 QSpinBox {
     padding-right: 15px; /* Crée un espace pour les flèches */
     border-image: url(:/images/frame.png) 4;
     border-width: 3;
 }
 
 QSpinBox::up-button {
     subcontrol-origin: border;
     subcontrol-position: top right; /* Position du coin en haut à droite */
 
     width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
     border-image: url(:/images/spinup.png) 1;
     border-width: 1px;
 }
 
 QSpinBox::up-button:hover {
     border-image: url(:/images/spinup_hover.png) 1;
 }
 
 QSpinBox::up-button:pressed {
     border-image: url(:/images/spinup_pressed.png) 1;
 }
 
 QSpinBox::up-arrow {
     image: url(:/images/up_arrow.png);
     width: 7px;
     height: 7px;
 }
 
 QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* État off quand la valeur est maximale */
    image: url(:/images/up_arrow_disabled.png);
 }
 
 QSpinBox::down-button {
     subcontrol-origin: border;
     subcontrol-position: bottom right; /* Position du coin en bas à droite */
 
     width: 16px;
     border-image: url(:/images/spindown.png) 1;
     border-width: 1px;
     border-top-width: 0;
 }
 
 QSpinBox::down-button:hover {
     border-image: url(:/images/spindown_hover.png) 1;
 }
 
 QSpinBox::down-button:pressed {
     border-image: url(:/images/spindown_pressed.png) 1;
 }
 
 QSpinBox::down-arrow {
     image: url(:/images/down_arrow.png);
     width: 7px;
     height: 7px;
 }
 
 QSpinBox::down-arrow:disabled,
 QSpinBox::down-arrow:off { /* État off quand la valeur est minimale */
    image: url(:/images/down_arrow_disabled.png);
 }

Personnalisation de QSplitter

QSplitter dérive de QFrame et peut par conséquent être stylisé comme un QFrame. La poignée ou le curseur est personnalisé avec le sous-contrôle ::handle.

 QSplitter::handle {
     image: url(images/splitter.png);
 }
 
 QSplitter::handle:horizontal {
     width: 2px;
 }
 
 QSplitter::handle:vertical {
     height: 2px;
 }
 
 QSplitter::handle:pressed {
     url(images/splitter_pressed.png);
 }

Personnalisation de QStatusBar

Nous pouvons fournir un arrière-plan pour la barre d'état et une bordure pour les éléments à l'intérieur de celle-ci comme ci-dessous :

 QStatusBar {
     background: brown;
 }
 
 QStatusBar::item {
     border: 1px solid red;
     border-radius: 3px;
 }

Notez que les wifgets qui ont été ajoutés à la QStatusBar peuvent être stylisés en utilisant une déclaration descendante (par exemple).

 QStatusBar QLabel {
     border: 3px solid white;
 }

Personnalisation de QTabWidget et de QTabBar

Pour la capture d'écran ci-dessus, nous avons besoin de la feuille de style qui suit :

 QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
 }
 
 QTabWidget::tab-bar {
     left: 5px; /* move to the right by 5px */
 }
 
 /* Style the tab using the tab sub-control. Note that
     it reads QTabBar _not_ QTabWidget */
 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }
 
 QTabBar::tab:selected, QTabBar::tab:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
 }
 
 QTabBar::tab:selected {
     border-color: #9B9B9B;
     border-bottom-color: #C2C7CB; /* same as pane color */
 }
 
 QTabBar::tab:!selected {
     margin-top: 2px; /* make non-selected tabs look smaller */
 }

Nous avons souvent besoin que les onglets se superposent comme ci-dessous :

Pour une barre d'onglets telle que celle ci-dessus, nous faisons l'usage de marges négatives. La feuille de style résultante ressemble à ceci :

 QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
 }
 
 QTabWidget::tab-bar {
     left: 5px; /* move to the right by 5px */
 }
 
 /* Style the tab using the tab sub-control. Note that
     it reads QTabBar _not_ QTabWidget */
 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }
 
 QTabBar::tab:selected, QTabBar::tab:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
 }
 
 QTabBar::tab:selected {
     border-color: #9B9B9B;
     border-bottom-color: #C2C7CB; /* same as pane color */
 }
 
 QTabBar::tab:!selected {
     margin-top: 2px; /* make non-selected tabs look smaller */
 }
 
 /* make use of negative margins for overlapping tabs */
 QTabBar::tab:selected {
     /* expand/overlap to the left and right by 4px */
     margin-left: -4px;
     margin-right: -4px;
 }
 
 QTabBar::tab:first:selected {
     margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
 }
 
 QTabBar::tab:last:selected {
     margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
 }
 
 QTabBar::tab:only-one {
     margin: 0; /* if there is only one tab, we don't want overlapping margins */
 }

Pour déplacer la barre d'onglets au centre (comme ci-dessous), nous avons besoin d'une feuille de style telle que celle qui suit :

 QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
     position: absolute;
     top: -0.5em;
 }
 
 QTabWidget::tab-bar {
     alignment: center;
 }
 
 /* Style the tab using the tab sub-control. Note that
     it reads QTabBar _not_ QTabWidget */
 QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }
 
 QTabBar::tab:selected, QTabBar::tab:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
 }
 
 QTabBar::tab:selected {
     border-color: #9B9B9B;
     border-bottom-color: #C2C7CB; /* same as pane color */
 }

L'indicateur de déchirure et les boutons de défilement peuvent être personnalisés comme ce qui suit :

 QTabBar::tear {
     image: url(tear_indicator.png);
 }
 
 QTabBar::scroller { /* the width of the scroll buttons */
     width: 20px;
 }
 
 QTabBar QToolButton { /* the scroll buttons are tool buttons */
     border-image: url(scrollbutton.png) 2;
     border-width: 2px;
 }
 
 QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */
     image: url(rightarrow.png);
 }
 
 QTabBar QToolButton::left-arrow {
     image: url(leftarrow.png);
 }

Depuis Qt 4.6, le bouton de fermeture peut être personnalisé comme ci-dessous :

 QTabBar::close-button {
     image: url(close.png)
     subcontrol-position: left;
 }
 QTabBar::close-button:hover {
     image: url(close-hover.png)
 }

Personnalisation de QTableView

Supposons que nous aimerions que notre élément sélectionné dans un QTableView ait un chewing-gum rose fondu vers le blanc en tant qu'arrière-plan.

Cela est possible avec la propriété selection-background-color. La syntaxe requise est la suivante :

 QTableView {
     selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
                                 stop: 0 #FF92BB, stop: 1 white);
 }

Le widget de coin peut être personnalisé en utilisant la feuille de style suivante :

 QTableView QTableCornerButton::section {
     background: red;
     border: 2px outset red;
 }

Personnalisation de QToolBar

L'arrière-plan et la curseur d'un QToolBar est personnalisé comme ci-dessous :

 QToolBar {
     background: red;
     spacing: 3px; /* spacing between items in the tool bar */
 }
 
 QToolBar::handle {
     image: url(handle.png);
 }

Personnalisation de QToolBox

Les onglets de QToolBox sont personnalisés en utilisant le sous-contrôle tab.

 QToolBox::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border-radius: 5px;
     color: darkgray;
 }
 
 QToolBox::tab:selected { /* italicize selected tabs */
     font: italic;
     color: white;
 }

Personnalisation de QToolButton

Il existe trois types de QToolButtons :

• les QToolButton qui n'ont pas de menu : dans ce cas, les QToolButton sont stylisés exactement comme des QPushButton ; regardez Personnalisation de QPushButton pour trouver un exemple ;
• les QToolButton qui ont un menu et qui ont le QToolButton::popupMode défini à QToolButton::DelayedPopup ou à QToolButton::InstantPopup : dans ce cas, le QToolButton est stylisé exactement comme un QPushButton avec un menu ; regardez Personnalisation de QPushButton pour trouver un exemple de l'usage d'un pseudo-état d'indicateur de menu ;
• les QToolButton qui ont leur QToolButton::popupMode défini à QToolButton::MenuButtonPopup : dans ce cas, nous les stylisons de la manière qui suit.

 QToolButton { /* all types of tool button */
     border: 2px solid #8f8f91;
     border-radius: 6px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #f6f7fa, stop: 1 #dadbde);
 }
 
 QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
     padding-right: 20px; /* make way for the popup button */
 }
 
 QToolButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #dadbde, stop: 1 #f6f7fa);
 }
 
 /* the subcontrols below are used only in the MenuButtonPopup mode */
 QToolButton::menu-button {
     border: 2px solid gray;
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
     /* 16px width + 4px for border = 20px allocated above */
     width: 16px;
 }
 
 QToolButton::menu-arrow {
     image: url(downarrow.png);
 }
 
 QToolButton::menu-arrow:open {
     top: 1px; left: 1px; /* shift it a bit */
 }

Personnalisation de QToolTip

Un QToolTip est personnalisable exactement comme un QLabel. De plus, pour les plateformes qui la supportent, la propriété d'opacité peut être définie pour ajuster celle-ci.

Par exemple :

 QToolTip {
     border: 2px solid darkkhaki;
     padding: 5px;
     border-radius: 3px;
     opacity: 200;
 }

Personnalisation de QTreeView

La couleur de fond des lignes alternées peut être personnalisée en utilisant la feuille de style suivante :

 QTreeView {
     alternate-background-color: yellow;
 }

Pour fournir un arrière-plan spécial aux éléments survolés, nous pouvons utiliser le sous-contrôle ::item. Par exemple :

 QTreeView {
     show-decoration-selected: 1;
 }
 
 QTreeView::item {
      border: 1px solid #d9d9d9;
     border-top-color: transparent;
     border-bottom-color: transparent;
 }
 
 QTreeView::item:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
     border: 1px solid #bfcde4;
 }
 
 QTreeView::item:selected {
     border: 1px solid #567dbc;
 }
 
 QTreeView::item:selected:active{
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
 }
 
 QTreeView::item:selected:!active {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
 }

Les branches d'un QTreeView sont stylisée en utilisant le sous-contrôle ::branch. La feuille de style de couleur suivante code les différents états lors du dessin d'une branche.

 QTreeView::branch {
         background: palette(base);
 }
 
 QTreeView::branch:has-siblings:!adjoins-item {
         background: cyan;
 }
 
 QTreeView::branch:has-siblings:adjoins-item {
         background: red;
 }
 
 QTreeView::branch:!has-children:!has-siblings:adjoins-item {
         background: blue;
 }
 
 QTreeView::branch:closed:has-children:has-siblings {
         background: pink;
 }
 
 QTreeView::branch:has-children:!has-siblings:closed {
         background: gray;
 }
 
 QTreeView::branch:open:has-children:has-siblings {
         background: magenta;
 }
 
 QTreeView::branch:open:has-children:!has-siblings {
         background: green;
 }

Un exemple plus utile peut être fait en utilisant les images suivantes :

vline.png	branch-more.png	branch-end.png	branch-closed.png	branch-open.png

 QTreeView::branch:has-siblings:!adjoins-item {
     border-image: url(vline.png) 0;
 }
 
 QTreeView::branch:has-siblings:adjoins-item {
     border-image: url(branch-more.png) 0;
 }
 
 QTreeView::branch:!has-children:!has-siblings:adjoins-item {
     border-image: url(branch-end.png) 0;
 }
 
 QTreeView::branch:has-children:!has-siblings:closed,
 QTreeView::branch:closed:has-children:has-siblings {
         border-image: none;
         image: url(branch-closed.png);
 }
 
 QTreeView::branch:open:has-children:!has-siblings,
 QTreeView::branch:open:has-children:has-siblings  {
         border-image: none;
         image: url(branch-open.png);
 }

L'arbre résultant ressemble à ceci :

Erreurs communes

Cette section liste des erreurs classiques faites lors de l'utilisation des feuilles de style.

QPushButton et les images

Lors de la stylisation d'un QPushButton, il est souvent souhaitable d'utiliser une image en tant que graphique de bouton. Il est commun d'essayer la propriété background-image mais cela a de nombreux inconvénients : par exemple, l'arrière-plan apparaîtra souvent comme « caché » derrière la décoration du bouton, parce qu'il n'est pas considéré comme un arrière-plan. De plus, si le bouton est redimensionné, l'arrière-plan entier sera étiré ou carrelé, ce qui ne rend pas toujours bien.

Il est préférable d'utiliser la propriété border-image, qui va toujours afficher l'image, sans prendre en compte l'arrière-plan (vous pouvez combiner cela avec un arrière-plan s'il a une valeur alpha sur lui) et possède des définitions spéciales pour faire face au redimensionnement du bouton.

Considérez l'extrait de code suivant :

         QPushButton {
             color: grey;
             border-image: url(/home/kamlie/code/button.png) 3 10 3 10;
             border-top: 3px transparent;
             border-bottom: 3px transparent;
             border-right: 10px transparent;
             border-left: 10px transparent;
         }

Cela va produire un bouton ressemblant à cela :

Les nombres après l'URL fournissent respectivement le nombre de pixels en haut, à droite, en bas et à gauche. Ces nombres correspondent à la bordure et celle-ci ne devrait donc pas s'étirer lorsque la longueur change. À chaque fois que vous redimensionnez le bouton, la partie centrale de l'image va s'étirer dans toutes les directions, alors que les pixels spécifiés dans la feuille de style ne le feront pas. Cela rend les bordures d'un bouton plus naturelles, comme ceci :

Avec bordures

Sans bordure

Voir aussi l'exemple Style Sheet, Le sous-ensemble HTML supporté et QStyle.

[ Précédent : Qt Style Sheets Reference ]

Remerciements

Merci à Louis du Verdier pour la traduction et à Jacques Thery pour la relecture !