Qt Labs StyleKit

StyleKit est un système de style déclaratif pour les contrôlesQt Quick , construit au-dessus de Qt Quick Templates. Il vous permet de définir un style visuel complet pour tous vos contrôles à partir d'un seul objet Style, y compris la prise en charge de themes, state-based styling, et transitions. StyleKit gère automatiquement l'implémentation des modèles sous-jacents, vous permettant de vous concentrer uniquement sur les aspects visuels tels que colors, dimensions, borders, et shadows.

L'un des points forts de StyleKit est son système de propriétés hiérarchiques : définissez une propriété une fois sur un type de base comme abstractButton, et elle s'applique automatiquement à tous les contrôles de type bouton. Remplacez-la si nécessaire pour des contrôles ou des états spécifiques. Les modifications apportées à votre style sont instantanément répercutées sur tous les contrôles, ce qui garantit la cohérence tout en permettant une personnalisation fine.

Pour les contrôles qui nécessitent un comportement personnalisé au-delà de ce que propose StyleKit, vous pouvez toujours mettre en œuvre des modèles personnalisés et les intégrer de manière transparente aux contrôles de style StyleKit.

Caractéristiques principales

Stylisation déclarative - Une API QML facile à utiliser qui vous permet de vous concentrer sur la conception plutôt que sur l'implémentation.
Retours hiérarchiques - Toutes les propriétés se propagent. Définissez-les une fois, remplacez-les si nécessaire
Stylisation basée sur l'état - Concevez des apparences distinctes pour les éléments survolés, appuyés, focalisés, etc.
Transitions animées - Définissez des animations fluides entre les états.
Prise en charge des thèmes - Concevez des thèmes clairs et foncés, ainsi qu'un nombre illimité de thèmes personnalisés.
Variations - Concevez plusieurs variations des mêmes contrôles.
Intégration des palettes et des polices - Configuration des palettes et des polices de contrôle à l'aide de QML

L'exemple suivant montre un exemple minimal de style :

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

Style {
    control {
        padding: 6
        background {
            radius: 4
            implicitWidth: 100
            implicitHeight: 36
        }
        indicator {
            implicitWidth: 20
            implicitHeight: 20
            border.width: 1
        }
        handle {
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }

    button {
        background {
            implicitWidth: 120
            shadow.opacity: 0.6
            shadow.verticalOffset: 2
            shadow.horizontalOffset: 2
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
            }
        }
        pressed.background.scale: 0.95
    }

    slider {
        indicator.implicitWidth: Style.Stretch
        indicator.implicitHeight: 6
        indicator.radius: 3
    }

    light: Theme {
        applicationWindow {
            background.color: "whitesmoke"
        }
        control {
            text.color: "black"
            background.color: "#e8e8e8"
            background.border.color: "#c0c0c0"
            hovered.background.color: "#d0d0d0"
        }
        button {
            text.color: "white"
            background.color: "cornflowerblue"
            background.shadow.color: "gray"
            hovered.background.color: "royalblue"
        }
    }

    dark: Theme {
        applicationWindow {
            background.color: Qt.darker("gray", 2.0)
        }
        control {
            text.color: "white"
            background.color: "#3a3a3a"
            background.border.color: "#555555"
            hovered.background.color: "#4a4a4a"
        }
        button {
            background.color: "sandybrown"
            background.shadow.color: "black"
            hovered.background.color: Qt.darker("sandybrown", 1.2)
        }
    }
}

Voici comment définir le style dans votre application :

// Main.qml

import QtQuick
import Qt.labs.StyleKit

ApplicationWindow {
    id: app
    width: 1024
    height: 800
    visible: true

    // Assign the style to be used
    StyleKit.style: PlainStyle {}

    // Controls are used as normal
    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Button {
            text: "Button"
        }

        Slider {
            width: 200
        }
    }
}

Utilisation du module dans votre projet

Les types QML du module sont disponibles via l'importation QtQuick.labs.StyleKit. Pour utiliser les types, ajoutez l'instruction d'importation suivante à votre fichier .qml :

import Qt.labs.StyleKit

Articles et guides

Exemples

Exemple StyleKit - Montre comment styliser les contrôlesQt Quick à l'aide de StyleKit.

Types QML

AbstractStylableControls	Type de base abstrait contenant les types de contrôle pouvant être stylisés
AbstractStyle	Type de base abstrait avec des propriétés communes au style et au thème
BorderStyle	Définit le style de bordure d'un délégué
ControlStateStyle	Décrit le style d'un contrôle dans un état donné
ControlStyle	Définit le style d'un contrôle dans l'état normal
ControlStyleProperties	Définit les propriétés stylisables d'un contrôle
CustomControl	Définit le style d'un contrôle personnalisé (non intégré)
CustomTheme	Définit un thème personnalisé nommé
DelegateStyle	Définit l'apparence visuelle d'un élément à l'intérieur d'un contrôle
HandleStyle	Définit le style de la poignée pour les contrôles tels que Switch, Slider et RangeSlider
ImageStyle	Définit le style de l'image pour un délégué
IndicatorStyle	Définit le style de l'indicateur d'un contrôle
ShadowStyle	Définit le style de l'ombre portée d'un délégué
Style	Type racine pour une définition de style
StyleAnimation	Anime les changements de propriétés de style lors des transitions d'état
StyleKit	Un singleton pour définir et accéder au style actuel
StyleKitDebug	Trace la façon dont les propriétés de style sont résolues pour un contrôle
StyleReader	Lit les propriétés du style actif pour un contrôle spécifique
StyleVariation	Définit des styles alternatifs pour des contrôles spécifiques
StyledItem	Rend un DelegateStyle
SubIndicatorStyle	Définit le style d'un délégué de sous-indicateur
TextStyle	Définit le style de texte de l'étiquette d'un contrôle
Theme	Définit les remplacements de couleur et de style pour une palette de couleurs

Licences

Qt Labs StyleKit est disponible sous licence commerciale auprès de The Qt Company. En outre, il est disponible sous la licence GNU Lesser General Public License, version 3, ou sous la licence GNU General Public License, version 2. Voir Qt Licensing pour plus de détails.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.