Qt Labs StyleKit

StyleKit est un système de mise en forme déclaratif pour Qt Quick Controls, s’appuyant sur les modèles d’Qt Quick . Il vous permet de définir un style visuel complet pour tous vos contrôles à partir d’un seul objet « Style », incluant la prise en charge de themes, du style state-based et de transitions. StyleKit gère automatiquement l’implémentation sous-jacente des modèles, vous permettant ainsi de vous concentrer uniquement sur les aspects visuels tels que colors, les dimensions, borders et shadows.

L’un des principaux atouts de StyleKit réside dans son système de propriétés hiérarchique : définissez une propriété une seule fois sur un type de base tel que 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 se répercutent instantanément sur tous les contrôles, garantissant ainsi la cohérence tout en permettant une personnalisation très fine.

Pour les contrôles nécessitant un comportement personnalisé allant au-delà de ce que propose StyleKit, vous pouvez toujours implémenter des modèles personnalisés et les intégrer de manière transparente aux côtés des contrôles stylisés par StyleKit.

Fonctionnalités clés

• Stylisation déclarative – Une API QML facile à utiliser qui vous permet de vous concentrer sur la conception plutôt que sur l’implémentation
• Règles de repli hiérarchiques – Toutes les propriétés se propagent. Définissez-les une seule fois, puis remplacez-les si nécessaire
• Stylisation basée sur les états: concevez des apparences distinctes pour les états « survolé », « enfoncé », « sélectionné », etc.
• Transitions animées: définissez des animations fluides entre les différents états
• Prise en charge des thèmes: concevez des thèmes clairs et sombres, ainsi qu’un nombre illimité de thèmes personnalisés
• Variations: concevez plusieurs variantes d’un même contrôle
• Intégration des palettes et des polices - Configurez les palettes et les polices des contrôles à l’aide de QML

L'exemple suivant présente un exemple minimal de style :

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

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

    button {
        background {
            width: 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.fillWidth: true
        indicator.height: 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 ces types, ajoutez la déclaration d'importation suivante à votre fichier .qml :

import Qt.labs.StyleKit

Articles et guides

• Présentation des fonctionnalités de StyleKit - Une brève introduction aux fonctionnalités de mise en forme disponibles
• Résolution des propriétés StyleKit - Comment StyleKit résout les valeurs des propriétés de style
• Référence : style de secours

Exemples

• Exemple de contrôles rapides StyleKit - Montre comment appliquer des styles Qt Quick Controls à l’aide de StyleKit.
• Exemple de widgets StyleKit: montre comment appliquer un style Qt Widgets à l’aide de StyleKit.
• Exemple de délégués personnalisés StyleKit: montre comment utiliser des délégués personnalisés et des effets de shader avec StyleKit.

Classes C++

types QML

Licences

Qt Labs StyleKit est disponible sous licence commerciale auprès de The Qt Company. Il est également disponible sous la licence GNU Lesser General Public License, version 3, ou sous la licence GNU General Public License, version 2. Pour plus d'informations, consultez la page Licences Qt.