StyleVariation QML Type

Definiert alternatives Styling für bestimmte Steuerelemente. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• name : string

Beigefügte Eigenschaften

• controlType : int
• variations : list<string>

Detaillierte Beschreibung

Mit einer StyleVariation können Sie ein alternatives Styling definieren, das auf bestimmte Steuerelemente in der Anwendung(Instanzvariationen) oder auf alle Abkömmlinge eines bestimmten übergeordneten Steuerelementtyps(Typvariationen) angewendet werden kann. So können Sie beispielsweise Steuerelementen in einer Seitenleiste ein kompaktes Aussehen verleihen oder Schaltflächen in allen toolbars anders aussehen lassen als Schaltflächen an anderen Stellen.

Instanz-Variationen

Instanzvariationen werden aktiviert, indem Sie die Eigenschaft variations attached für ein beliebiges Element in der Anwendung festlegen - alle StyleKit Steuerelemente, die Kinder oder Nachkommen dieses Elements sind, erhalten das alternative Styling. Variationen können auch auf mehreren Ebenen der Hierarchie gleichzeitig eingestellt werden; wenn sie sich widersprechen, hat die Variation, die dem Steuerelement am nächsten ist, Vorrang.

Instanzvariationen werden in den Style oder Theme definiert, die sie betreffen:

Style {
    StyleVariation {
        name: "mini"
        control {
            padding: 2
            background.implicitHeight: 15
            indicator.implicitWidth: 15
            indicator.implicitHeight: 15
            handle.implicitWidth: 15
            handle.implicitHeight: 15
        }
    }

    StyleVariation {
        name: "alert"
        abstractButton.background.color: "red"
    }
}

Und sie werden von der Anwendung aus mit der Eigenschaft variations attached angewendet:

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

Variationsnamen, auf die von der Anwendung aus verwiesen wird und die nicht im aktiven Stil (oder Thema) definiert sind, werden stillschweigend ignoriert - sie fungieren als Hinweise, die der Stilautor wahlweise implementieren oder unbehandelt lassen kann.

Typvariationen

Typvariationen werden der Eigenschaft variations eines bestimmten ControlStyle zugewiesen, ohne dass eine name erforderlich ist. Im Gegensatz zu Instanzvariationen - für die sich die Anwendung explizit entscheiden muss - werden Typvariationen automatisch auf alle Steuerelemente eines bestimmten Typs angewendet, wenn sie Nachkommen des angegebenen übergeordneten Steuerelementtyps sind.

Der folgende Ausschnitt zeigt, wie man alle Buttons innerhalb eines Frame von anderen Schaltflächen unterscheiden kann:

Style {
    frame {
        variations: StyleVariation {
            button {
                text.color: "ghostwhite"
                background.border.width: 0
                background.color: "slategrey"
            }
        }
    }

    groupBox {
        // groupBox falls back to frame. Therefore, if the varations set on a
        // frame is not wanted on a groupBox, just override it and set it back to [].
        variations: []
    }
}

Da groupBox in der Stilhierarchie auf frame zurückfällt, werden die auf frame festgelegten Typvariationen automatisch auch auf groupBox vererbt. Um dies zu verhindern, setzen Sie die Variationen für den Untertyp zurück.

Reihenfolge der Vererbung

Eine StyleVariation ist lokal für die Style oder Theme, wo sie definiert ist. Ein Thema kann nicht die gesamte StyleVariation, die im Style definiert ist, überschatten - nur einzelne Eigenschaften darin können wie jede andere Style-Eigenschaft außer Kraft gesetzt werden.

Wenn beispielsweise sowohl das Style als auch das aktive Theme frame.variations definieren, werden beide Typvariationen für ein Frame wirksam. Die Auflösungsreihenfolge für einzelne Eigenschaften ist: Die Variationseigenschaften des Themas haben Vorrang vor den direkten Eigenschaften des Themas, die wiederum Vorrang vor den Variationseigenschaften des Stils haben, die wiederum Vorrang vor den direkten Eigenschaften des Stils haben.

Das gleiche gilt für Instanzvariationen. Eine StyleVariation, die in einem Theme definiert ist, hat Vorrang vor den direkten Eigenschaften des Themas. Wenn eine StyleVariation mit der gleichen name auch in Style definiert ist, werden beide wirksam, wobei die oben beschriebene Auflösungsreihenfolge eingehalten wird.

Im folgenden Ausschnitt wird eine Schaltfläche mit StyleVariation.variations: ["alert"] im hellen Thema rot und im dunklen Thema cyan sein, mit einem 4-Pixel-Rahmen in beiden. Da das dunkle Design button.background.radius mit 6 überschreibt, hat diese Eigenschaft Vorrang vor der in der Variation des Stils festgelegten background.radius. Infolgedessen ist der Radius der Schaltfläche im dunklen Thema 6, im hellen Thema jedoch 0:

Style {
    button.background.radius: 2
    StyleVariation {
        name: "alert"
        button.background.border.width: 4
        button.background.radius: 0
    }

    light: Theme {
        StyleVariation {
            name: "alert"
            button.background.color: "red"
        }
    }

    dark: Theme {
        button.background.radius: 6
        StyleVariation {
            name: "alert"
            button.background.color: "cyan"
        }
    }
}

Siehe auch Style, Theme, ControlStyle.variations, und StyleVariation.variations.

Dokumentation der Eigenschaften

name : string

Der Name dieser Variante.

Der Name identifiziert diese Variante, wenn sie als instance variation verwendet wird.

Siehe auch variations und Instance Variations.

Dokumentation der angehängten Eigenschaft

StyleVariation.controlType : int

Diese Eigenschaft identifiziert die control type des Elements, an das sie angehängt ist.

StyleKit verwendet sie, um type variations für absteigende Steuerelemente aufzulösen - wenn controlType eines übergeordneten Elements mit einem Steuertyp übereinstimmt, für den variations in Style definiert ist, gelten diese Variationen für alle absteigenden Steuerelemente.

Eingebaute Steuerelemente setzen diese Eigenschaft automatisch. Benutzerdefinierte Steuerelemente müssen sie explizit einstellen, um an der Auflösung von Typvariationen teilzunehmen.

Siehe auch ControlStyle.variations und StyleReader.controlType.

StyleVariation.variations : list<string>

Diese Eigenschaft enthält die Liste der zu aktivierenden instance variations für ein Control und seine abhängigen Steuerelemente.

Wenn mehrere Variationen in der Liste die gleiche Eigenschaft einstellen, hat die erste in der Liste Vorrang.

Wenn Variationen sowohl für ein übergeordnetes Element als auch für ein untergeordnetes Steuerelement festgelegt sind, gelten beide Sätze, wobei die eigenen Variationen des Steuerelements Vorrang vor den vom übergeordneten Element geerbten haben.

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

Siehe auch name.