Qt Labs StyleKit

StyleKit ist ein deklaratives Styling-System für Qt Quick Controls, das auf Qt Quick Templates aufbaut. Es ermöglicht Ihnen die Definition eines kompletten visuellen Stils für alle Ihre Steuerelemente über ein einziges Style Objekt, einschließlich der Unterstützung für themes, state-based Styling und transitions. StyleKit handhabt die zugrunde liegende Template-Implementierung automatisch, so dass Sie sich ausschließlich auf visuelle Aspekte wie colors, dimensions, borders und shadows konzentrieren können.

Eine wesentliche Stärke von StyleKit ist sein hierarchisches Eigenschaftssystem: Setzen Sie eine Eigenschaft einmal auf einen Basistyp wie abstractButton, und sie gilt automatisch für alle schaltflächenähnlichen Steuerelemente. Bei Bedarf können Sie sie für bestimmte Steuerelemente oder Zustände überschreiben. Änderungen an Ihrem Stil werden sofort für alle Steuerelemente übernommen, wodurch die Konsistenz gewährleistet wird und gleichzeitig eine fein abgestufte Anpassung möglich ist.

Für Steuerelemente, die ein benutzerdefiniertes Verhalten benötigen, das über das hinausgeht, was StyleKit bietet, können Sie immer noch benutzerdefinierte Vorlagen implementieren und diese nahtlos neben StyleKit-gestylten Steuerelementen integrieren.

Hauptmerkmale

• Deklaratives Styling - Eine benutzerfreundliche QML-API, mit der Sie sich auf das Design statt auf die Implementierung konzentrieren können
• Hierarchische Fallbacks - Alle Eigenschaften werden weitergegeben. Einmal einstellen, bei Bedarf überschreiben
• Zustandsbasiertes Styling - Entwerfen Sie getrennte Erscheinungsbilder für schwebende, gedrückte, fokussierte, usw.
• Animierte Übergänge - Definieren Sie sanfte Animationen zwischen Zuständen
• Theme-Unterstützung - Entwerfen Sie helle und dunkle Themes sowie eine beliebige Anzahl von benutzerdefinierten Themes
• Variationen - Entwerfen Sie mehrere Variationen der gleichen Steuerelemente
• Integration von Paletten und Schriftarten - Konfigurieren Sie Steuerpaletten und Schriftarten mit QML

Das folgende Beispiel zeigt ein minimales Beispiel für einen Stil:

// 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)
        }
    }
}

So legen Sie den Stil in Ihrer Anwendung fest:

// 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
        }
    }
}

Verwendung des Moduls in Ihrem Projekt

Die QML-Typen des Moduls sind über den QtQuick.labs.StyleKit -Import verfügbar. Um die Typen zu verwenden, fügen Sie die folgende Importanweisung zu Ihrer .qml-Datei hinzu:

import Qt.labs.StyleKit

Artikel und Leitfäden

Beispiele

• StyleKit-Beispiel - Zeigt, wie man Qt Quick Controls mit StyleKit gestaltet.

QML-Typen

Lizenzen

Qt Labs StyleKit ist unter kommerziellen Lizenzen von The Qt Company erhältlich. Darüber hinaus ist es unter der GNU Lesser General Public License, Version 3, oder der GNU General Public License, Version 2, erhältlich. Weitere Einzelheiten finden Sie unter Qt-Lizenzierung.