StyleVariation QML Type

Definiert alternative Darstellungsformen für bestimmte Steuerelemente. Mehr...

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

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• name : string

Zugehörige Eigenschaften

• controlType : int
• variations : list<string>

Ausführliche Beschreibung

Mit einer „StyleVariation“ können Sie alternative Stile definieren, die auf bestimmte Steuerelemente in der Anwendung (Instanzvarianten) oder auf alle untergeordneten Elemente eines bestimmten übergeordneten Steuerelementtyps (Typvarianten) angewendet werden können. So können Sie beispielsweise Steuerelementen in einer Seitenleiste ein kompaktes Erscheinungsbild verleihen oder dafür sorgen, dass sich Schaltflächen innerhalb aller „ toolbars “ von Schaltflächen an anderen Stellen unterscheiden.

Instanzvariationen

Instanzvariationen werden durch das Setzen der angehängten Eigenschaft „ variations “ für ein beliebiges Element in der Anwendung aktiviert – alle StyleKit-Steuerelemente, die Kinder oder Nachkommen dieses Elements sind, erhalten das alternative Styling. Variationen können auch gleichzeitig auf mehreren Ebenen der Hierarchie festgelegt werden; bei Konflikten hat die Variation Vorrang, die dem Steuerelement am nächsten liegt.

Instanzvariationen werden in den von ihnen betroffenen Elementen „ Style “ oder „ Theme “ definiert:

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

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

Und sie werden von der Anwendung über die angehängte Eigenschaft „ variations “ 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 aus der Anwendung verwiesen wird und die im aktiven Stil (oder Thema) nicht definiert sind, werden stillschweigend ignoriert – sie dienen als Hinweise, die der Stilautor nach Belieben umsetzen oder unbeachtet lassen kann.

Typvariationen

Typvariationen werden der Eigenschaft „ variations “ eines bestimmten „ ControlStyle “ zugewiesen, ohne dass ein „ name “ erforderlich ist. Im Gegensatz zu Instanzvariationen – bei denen die Anwendung die Verwendung explizit aktivieren muss – werden Typvariationen automatisch auf alle Steuerelemente eines bestimmten Typs angewendet, sofern diese Nachkommen des angegebenen übergeordneten Steuerelementtyps sind.

Der folgende Codeausschnitt zeigt, wie alle „ Buttons “ innerhalb eines „ Frame “ so gestaltet werden können, dass sie sich von Schaltflächen an anderer Stelle unterscheiden:

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ückgreift, werden die für „ frame “ festgelegten Typvariationen automatisch auch von „ groupBox “ übernommen. Um dies zu deaktivieren, setzen Sie die Variationen für den Untertyp zurück.

Reihenfolge der Weitergabe

Eine „StyleVariation“ gilt lokal für Style oder Theme, wo sie definiert ist. Ein Theme kann nicht eine gesamte, im Style definierte „StyleVariation“ überschreiben – es können nur einzelne Eigenschaften darin überschrieben werden, genau wie bei jeder anderen Style-Eigenschaft.

Wenn beispielsweise sowohl die „ Style “ als auch das aktive „ Theme “ „ frame.variations “ definieren, werden beide Typvariations-Arrays für eine „ Frame “ wirksam. Die Auswertungsreihenfolge für einzelne Eigenschaften lautet: Die Variationseigenschaften des Themes haben Vorrang vor den direkten Eigenschaften des Themes, die wiederum Vorrang vor den Variationseigenschaften des Styles haben, welche wiederum Vorrang vor den direkten Eigenschaften des Styles haben.

Das Gleiche gilt für Instanzvariationen. Eine in einem „ Theme “ definierte „StyleVariation“ hat Vorrang vor den direkten Eigenschaften des Themes. Wenn eine „StyleVariation“ mit demselben „ name “ auch im „ Style “ definiert ist, werden beide wirksam, wobei die gleiche Auflösungsreihenfolge wie oben beschrieben gilt.

Im folgenden Codeausschnitt wird eine Schaltfläche mit der „ StyleVariation.variations: ["alert"] “ im hellen Design rot und im dunklen Design cyanfarben angezeigt, jeweils mit einem 4-Pixel-Rahmen. Da das dunkle Design „ button.background.radius “ durch „ 6 “ überschreibt, hat diese Eigenschaft Vorrang vor dem in der Variation des Stils festgelegten Wert „ background.radius “. Infolgedessen beträgt der Radius der Schaltfläche im dunklen Design „ 6 “, im hellen Design hingegen „ 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, {StyleKit Property Resolution}.

Dokumentation zu den Eigenschaften

name : string

Der Name dieser Variante.

Der Name dient zur Identifizierung dieser Variante, wenn sie als „ instance variation “ verwendet wird.

Siehe auch „ variations “ und „ Instance Variations “.

Dokumentation zu angehängten Eigenschaften

StyleVariation.controlType : int [attached]

Diese Eigenschaft gibt den control type des Elements an, an das sie angehängt ist.

StyleKit verwendet diese Eigenschaft, um „ type variations “ für untergeordnete Steuerelemente aufzulösen – wenn die „ controlType “ eines übergeordneten Elements mit einem Steuerelementtyp übereinstimmt, für den in der „ Style “ „ variations “ definiert sind, gelten diese Variationen für alle untergeordneten Steuerelemente.

Integrierte Steuerelemente legen diese Eigenschaft automatisch fest. Benutzerdefinierte Steuerelemente müssen sie explizit festlegen, um an der Auflösung von Typvariationen teilzunehmen.

Siehe auch „ ControlStyle.variations “ und „ StyleReader.controlType “.

StyleVariation.variations : list<string> [attached]

Diese Eigenschaft enthält die Liste der zu aktivierenden „ instance variations “ für ein „ Control “ und dessen untergeordnete Steuerelemente.

Wenn mehrere Variationen in der Liste dieselbe Eigenschaft festlegen, 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 Einstellungen, 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 “.