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

Lors de l'utilisation des feuilles de style, chaque widget est traité comme une boîte avec 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 rembourrage.
• Le rembourrage se trouve à l'intérieur de la bordure, entre la bordure et le contenu réel.
• Le contenu est ce qui reste du widget ou du sous-contrôle d'origine une fois que la marge, la bordure et le rembourrage ont été supprimés.

Les propriétés margin, border-width et padding sont toutes définies par défaut à 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 dessinée que pour la zone située à l'intérieur de la bordure. Ceci peut être modifié à l'aide de la propriété background-clip. Vous pouvez utiliser 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 une "peau" ou un arrière-plan qui s'adapte à la taille du widget, il faut utiliser 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 la propriété border-image est spécifiée. Dans le cas où les deux propriétés sont spécifiées, l'image de bordure est dessinée par-dessus l'image d'arrière-plan.

En outre, la propriété image peut être utilisée pour dessiner une image par-dessus l'image de bordure. L'image spécifiée n'est ni tuilée ni étirée et lorsque sa taille ne correspond pas à celle du widget, son alignement est spécifié à l'aide de la propriété image-position. Contrairement à background-image et border-image, il est possible de spécifier un SVG dans la propriété image, auquel cas l'image est automatiquement redimensionnée en fonction de la taille du widget.

Les étapes du rendu d'une règle sont les suivantes :

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

Sous-contrôles

Un widget est considéré comme une hiérarchie (arbre) de sous-contrôles dessinés les uns au-dessus des autres. Par exemple, le QComboBox dessine le sous-contrôle déroulant suivi du sous-contrôle flèche vers le bas. Un QComboBox est ainsi rendu comme suit :

• Rendu de la règle QComboBox { }
• Rendu de la règle QComboBox::drop-down { }
• Rendu de la règle QComboBox::down-arrow { }

Les sous-contrôles partagent une relation parent-enfant. Dans le cas de QComboBox, le parent de la flèche descendante est le menu déroulant et le parent du menu déroulant est le widget lui-même. Les sous-contrôles sont positionnés à l'intérieur 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.