Personnalisation d'Qt Widgets s à l'aide de feuilles de style

Lors de l'utilisation de feuilles de style, chaque widget est traité comme une boîte composée de quatre rectangles concentriques : le rectangle de marge, le rectangle de bordure, le rectangle de remplissage et le rectangle de contenu. Le modèle de boîte décrit cela plus en détail.

Le modèle de boîte

Les quatre rectangles concentriques se présentent conceptuellement comme suit :

• La marge se situe à l'extérieur de la bordure.
• La bordure est tracée entre la marge et le remplissage.
• Le remplissage se trouve à l'intérieur de la bordure, entre celle-ci et le contenu proprement dit.
• Le contenu correspond à ce qui reste du widget ou du sous-contrôle d'origine une fois que l'on a supprimé la marge, la bordure et le remplissage.

Les propriétés « margin », « border-width » et « padding » ont toutes une valeur par défaut de zéro. Dans ce cas, les quatre rectangles (margin, border, padding et content) coïncident exactement.

Vous pouvez spécifier un arrière-plan pour le widget à l’aide de la propriété `background-image`. Par défaut, l’image d’arrière-plan n’est affichée que dans la zone située à l’intérieur de la bordure. Vous pouvez modifier ce comportement à l’aide de la propriété `background-clip`. Vous pouvez utiliser les propriétés `background-repeat` et `background-origin` pour contrôler la répétition et l’origine de l’image d’arrière-plan.

Une image d’arrière-plan ne s’adapte pas à la taille du widget. Pour fournir un « skin » ou un arrière-plan qui s’adapte à la taille du widget, il faut utiliser la propriété `border-image`. Étant donné que la propriété `border-image` fournit un arrière-plan alternatif, il n’est pas nécessaire de spécifier une image d’arrière-plan lorsque `border-image` est spécifiée. Si les deux sont spécifiées, la propriété `border-image` s’affiche par-dessus la propriété `background-image`.

De plus, la propriété `image` peut être utilisée pour superposer une image à la propriété `border-image`. L’image spécifiée ne se répète pas et ne s’étire pas ; lorsque sa taille ne correspond pas à celle du widget, son alignement est défini à l’aide de la propriété `image-position`. Contrairement à `background-image` et à `border-image`, il est possible de spécifier un fichier SVG dans la propriété `image` ; dans ce cas, l’image est automatiquement redimensionnée en fonction de la taille du widget.

Les étapes de rendu d’une règle sont les suivantes :

• Définir le découpage pour l'ensemble de l'opération de rendu (border-radius)
• Dessiner l'arrière-plan (background-image)
• Dessiner la bordure (border-image, border)
• Dessiner l'image de superposition (image)

Sous-contrôles

Un widget est considéré comme une hiérarchie (arborescence) de sous-contrôles superposés les uns aux autres. Par exemple, l’ QComboBox e dessine le sous-contrôle de menu déroulant, suivi du sous-contrôle de flèche vers le bas. Un QComboBox est donc rendu comme suit :

• Afficher la règle QComboBox { }
• Afficher la règle QComboBox::drop-down { }
• Afficher la règle QComboBox::flèche-vers-le-bas { }

Les sous-contrôles partagent une relation parent-enfant. Dans le cas de QComboBox, le parent de down-arrow est drop-down et le parent de drop-down est le widget lui-même. Les sous-contrôles sont positionnés au sein de leur parent à l'aide des propriétés subcontrol-position et subcontrol-origin.

Une fois positionnés, les sous-contrôles peuvent être stylisés à l'aide du modèle de boîte.