Style QML Type

Der Wurzeltyp für eine Stildefinition. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• Stretch : int
• customThemeNames : list<string>
• dark : Component
• fallbackStyle : Style
• light : Component
• palette : palette
• theme : Theme
• themeName : string
• themeNames : list<string>

Detaillierte Beschreibung

Style ist der Root-Typ in StyleKit zur Definition eines kompletten visuellen Stils für Qt Quick Controls. Mit einem Stil können Sie das Erscheinungsbild von every control type - backgrounds, indicators, handles, text, padding, und mehr - sowie die Reaktion der Steuerelemente auf Zustände wie hovered, pressed und disabled, einschließlich animierter transitions zwischen ihnen, anpassen.

Stile unterstützen light und dark Farbschemata durch themes, und Sie können auch eine beliebige Anzahl von custom themes hinzufügen. Style variations ermöglicht es Ihnen, alternatives Styling zu definieren, das auf bestimmte Kontrollinstanzen oder ganze Kontrolltypen angewendet werden kann. Sie können auch custom controls definieren, um den Stil über den eingebauten Steuerelementsatz hinaus zu erweitern.

Das folgende Beispiel zeigt einen minimalen Stil, der einige strukturelle Eigenschaften definiert, die von allen Themen gemeinsam genutzt werden, mit separaten hellen und dunklen Themen für Farben:

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

Ein ausführlicheres Beispiel finden Sie im StyleKit-Beispiel.

Siehe auch Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl, und Property Resolution.

Dokumentation zu Eigenschaften

Stretch : int [read-only]

Ein Sentinel-Wert, der, wenn er der implicitWidth oder implicitHeight eines Delegaten zugewiesen wird, bewirkt, dass der Delegat den verfügbaren Platz entlang dieser Achse ausfüllt. Der verfügbare Platz wird durch Layout-Eigenschaften wie margins und padding eingeschränkt.

Zum Beispiel füllt eine Schiebereglerrille die verfügbare Breite aus:

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

Siehe auch DelegateStyle::implicitWidth und DelegateStyle::implicitHeight.

customThemeNames : list<string> [read-only]

Die Namen aller im Stil definierten custom themes. Dies beinhaltet nicht die built-in themes.

Siehe auch themeNames, themeName, und CustomTheme.

dark : Component

Die Komponente für das dunkle Thema. Sie wird instanziiert und angewendet, wenn sich das System im dunklen Modus befindet und themeName auf "System" steht, oder wenn themeName explizit auf "Dark" gesetzt wird.

dark: Theme {
    control.background.color: "#404040"
    button.hovered.background.color: "#6ab0f9"
}

Siehe auch light, themeName, und Thema.

fallbackStyle : Style

Der Fallback-Stil, der verwendet wird, um Eigenschaften aufzulösen, die nicht explizit in diesem Stil festgelegt sind. Wenn eine Eigenschaft nicht im Stil oder seinem aktiven Thema gefunden wird, sucht StyleKit im Fallback-Stil nach ihr.

Standardmäßig ist der Fallback-Stil auf einen internen Stil eingestellt, der ein grundlegendes Erscheinungsbild ähnlich dem Stil Basic bietet.

Sie können dies auf einen benutzerdefinierten Stil oder auf null setzen, um die Fallback-Auflösung vollständig zu deaktivieren. Beachten Sie, dass die Einstellung auf null bedeutet, dass Sie mit einem völlig neuen Stil beginnen müssen, was bedeutet, dass Sie viel mehr Eigenschaften einstellen müssen als sonst erforderlich. Eine Referenzimplementierung eines Fallback-Stils finden Sie hier.

Siehe auch Property Resolution.

light : Component

Die Komponente für das Lichtthema. Sie wird instanziiert und angewendet, wenn sich das System im Lichtmodus befindet und themeName auf "System" steht oder wenn themeName explizit auf "Light" gesetzt wird.

light: Theme {
    control.background.color: "#f0f0f0"
    button.hovered.background.color: "#4a90d9"
}

Siehe auch dark, themeName, und Thema.

palette : palette [read-only]

Die Palette des Steuerelements, das gestylt wird.

Verwenden Sie diese Palette, um die Farben im Stil an die palette des Steuerelements zu binden, das gestylt wird. Wenn die Anwendung einem Steuerelement eine andere Palette zuweist, wird der Stil angepasst und das Steuerelement neu gezeichnet.

button.background.color: palette.accent
button.text.color: palette.buttonText

Siehe auch StyleReader::palette.

theme : Theme [read-only]

Die derzeit aktive Theme-Instanz. Es wird entweder von light theme component, dark theme component oder einem der custom themes instanziiert, abhängig von themeName.

Wenn eine Stileigenschaft aufgelöst wird, sucht StyleKit zuerst in diesem Thema (nebenStyleVariations ) danach. Wenn die Eigenschaft nicht gefunden wird, wird sie in der Style gesucht.

Siehe auch themeName, light, und dark.

themeName : string

Der Name des derzeit aktiven Themas. Der Standardwert ist "System", der automatisch zwischen light oder dark wählt, je nach dem von QStyleHints::colorScheme gemeldeten Farbschema.

Sie können diese Eigenschaft festlegen, um das aktuelle Thema dieses Stils zu ändern.

// Main.qml

StyleKit.style: YourStyleKitStyle {
    // Set a theme different from "System" at start-up
    themeName: "Dark"
}

ComboBox {
    // Let the user select a different theme at run-time
    model: StyleKit.style.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

Unterstützte Werte:

• "System" - folgt QStyleHints::colorScheme (Voreinstellung)
• "Light" - erzwingt das Thema light
• "Dark" - erzwingt das Thema dark
• Any custom theme name

Siehe auch themeNames und theme.

themeNames : list<string> [read-only]

Die Namen aller verfügbaren Themen, einschließlich "System", "Light", "Dark", und alle custom themes.

Siehe auch themeName und customThemeNames.