Qt Labs StyleKit

StyleKit ist ein deklaratives Styling-System für Qt Quick Controls, das auf „Qt Quick Templates“ aufbaut. Damit können Sie einen vollständigen visuellen Stil für alle Ihre Steuerelemente über ein einziges „ Style “-Objekt definieren, einschließlich der Unterstützung für „ themes “, „ state-based “-Styling und „ transitions “. StyleKit übernimmt automatisch die zugrunde liegende Template-Implementierung, sodass Sie sich ganz auf visuelle Aspekte wie „ colors “, Abmessungen, „ borders “ und „ shadows “ konzentrieren können.

Eine zentrale Stärke von StyleKit ist sein hierarchisches Eigenschaftssystem: Legen Sie eine Eigenschaft einmalig für einen Basistyp wie abstractButton fest, und sie gilt automatisch für alle schaltflächenähnlichen Steuerelemente. Überschreiben Sie sie bei Bedarf für bestimmte Steuerelemente oder Zustände. Änderungen an Ihrem Stil werden sofort in allen Steuerelementen übernommen, was Konsistenz gewährleistet und gleichzeitig eine detaillierte Anpassung ermöglicht.

Für Steuerelemente, die ein individuelles Verhalten benötigen, das über die Möglichkeiten von StyleKit hinausgeht, können Sie weiterhin eigene Vorlagen implementieren und diese nahtlos neben den mit StyleKit gestalteten Steuerelementen integrieren.

Wichtigste Funktionen

• 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 festlegen, bei Bedarf überschreiben
• Zustandsbasierte Gestaltung – Entwerfen Sie unterschiedliche Darstellungen für den Mauszeiger-Überflug, beim Drücken, im Fokus usw.
• Animierte Übergänge – Definieren Sie flüssige Animationen zwischen den Zuständen
• Themenunterstützung – Entwerfen Sie helle und dunkle Themen sowie beliebig viele benutzerdefinierte Themen
• Variationen – Entwerfen Sie mehrere Variationen derselben Steuerelemente
• Paletten- und Schriftartintegration – Konfigurieren Sie Steuerelementpaletten und Schriftarten mithilfe von QML

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

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

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 Import „ QtQuick.labs.StyleKit “ verfügbar. Um die Typen zu verwenden, fügen Sie die folgende Importanweisung in Ihre .qml-Datei ein:

import Qt.labs.StyleKit

Artikel und Anleitungen

• StyleKit-Funktionen im Überblick – Eine kurze Einführung in die verfügbaren Styling-Funktionen
• Auflösung von StyleKit-Eigenschaften – Wie StyleKit die Werte von Stileigenschaften auflöst
• Referenz-Fallback-Stil

Beispiele

• Beispiel für StyleKit-Schnellsteuerelemente – Zeigt, wie man Qt Quick Controls mit StyleKit gestaltet werden.
• Beispiel für StyleKit-Widgets – Zeigt, wie man Qt Widgets mit StyleKit gestaltet werden.
• Beispiel für benutzerdefinierte Delegaten in StyleKit – Zeigt, wie man benutzerdefinierte Delegaten und Shader-Effekte mit StyleKit verwendet.

C++-Klassen

QML-Typen

Lizenzen

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