Style QML Type

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

Dieser Typ befindet sich in der Technologievorschau und kann sich noch ändern.

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

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

Ausführliche Beschreibung

Style ist der Stammtyp in StyleKit zur Definition eines vollständigen 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 weiteren — anpassen sowie festlegen, wie Steuerelemente auf Zustände wie hovered, pressed und disabled reagieren, einschließlich animierter Übergänge transitions zwischen diesen Zuständen.

Stile unterstützen die Farbschemata „ light “ und „ dark “ über „ themes “, und Sie können zudem beliebig viele „ custom themes “ hinzufügen. Mit „ Style variations “ können Sie alternative Stile definieren, die auf bestimmte Steuerelementinstanzen oder ganze Steuerelementtypen angewendet werden können. Sie können auch „ custom controls “ definieren, um den Stil über den integrierten Satz an Steuerelementen hinaus zu erweitern.

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

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

Ein ausführlicheres Beispiel finden Sie im StyleKit-Beispiel „Quick Controls“.

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

Dokumentation zu Eigenschaften

availableThemeNames : list<string> [read-only]

Die Namen aller verfügbaren Designs, darunter "System", "Light", "Dark" sowie alle weiteren custom themes.

Siehe auch themeName und customThemeNames.

customThemeNames : list<string> [read-only]

Die Namen aller im Stil definierten „ custom themes “. Dies umfasst nicht die built-in themes.

Siehe auch „ availableThemeNames “, „ themeName “ und „ CustomTheme “.

dark : Component

Die Komponente für das dunkle Design. Sie wird instanziiert und angewendet, wenn sich das System im Dunkelmodus befindet und „ themeName “ auf „ "System" “ gesetzt ist oder wenn „ themeName “ explizit auf „ "Dark" “ gesetzt ist.

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

Siehe auch light und themeName.

fallbackStyle : Style

Der Fallback-Stil wird verwendet, um Eigenschaften aufzulösen, die in diesem Stil nicht explizit festgelegt sind. Wenn eine Eigenschaft weder im Stil noch im aktiven Thema gefunden wird, sucht StyleKit im Fallback-Stil danach.

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

Sie können hier einen benutzerdefinierten Stil festlegen oder „ null “ verwenden, um die Fallback-Auflösung vollständig zu deaktivieren. Beachten Sie, dass die Einstellung „ null “ bedeutet, dass Sie bei Null anfangen müssen, was erfordert, dass Sie viel mehr Eigenschaften festlegen müssen, als sonst nötig wären. Eine Referenzimplementierung eines Fallback-Stils finden Sie hier.

light : Component

Die Komponente für das helle Design. Sie wird instanziiert und angewendet, wenn sich das System im hellen Modus befindet und „ themeName “ auf „ "System" “ gesetzt ist oder wenn „ themeName “ explizit auf „ "Light" “ gesetzt ist.

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

Siehe auch dark und themeName.

palette : palette [read-only]

Die Farbpalette des zu gestaltenden Steuerelements.

Verwenden Sie diese Palette, um Farben im Stil mit den „ palette “ des zu gestaltenden Steuerelements zu verknüpfen. Wenn die Anwendung einem Steuerelement eine andere Palette zuweist, passt sich der Stil an, und das Steuerelement wird 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. Sie wird entweder aus der Datei „ light theme component “, der Datei „ dark theme component “ oder einer der Dateien „ custom themes “ instanziiert, abhängig von der Einstellung unter „ themeName “.

Beim Auflösen einer Stileigenschaft sucht StyleKit zunächst in diesem Theme danach (abgesehen vonStyleVariations ). Wird die Eigenschaft dort nicht gefunden, greift es auf die Suche in Style zurück.

Siehe auch themeName, light und dark.

themeName : string

Der Name des derzeit aktiven Designs. Der Standardwert lautet „ "System" “, wodurch je nach dem von QStyleHints::colorScheme gemeldeten Farbschema automatisch zwischen „ light “ und „ dark “ gewählt wird.

Sie können diese Eigenschaft festlegen, um das aktuelle Design 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.availableThemeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

Unterstützte Werte:

• "System" — folgt QStyleHints::colorScheme (Standard)
• "Light" — erzwingt das „ light “-Design
• "Dark" — erzwingt das Design von dark
• Any custom theme name

Siehe auch „ availableThemeNames “ und „ theme “.