StyleVariation QML Type

Définit un style alternatif pour des contrôles spécifiques. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• name : string

Propriétés rattachées

• controlType : int
• variations : list<string>

Description détaillée

Une StyleVariation vous permet de définir un style alternatif qui peut être appliqué à des contrôles spécifiques dans l'application(variations d'instance), ou à tous les descendants d'un type de contrôle parent particulier(variations de type). Par exemple, vous pouvez donner aux contrôles d'une barre latérale une apparence compacte, ou faire en sorte que les boutons situés à l'intérieur de toutes les pages toolbars aient un aspect différent des boutons situés ailleurs.

Variations d'instance

Les variations d'instance sont activées en définissant la propriété variations attached sur n'importe quel élément de l'application - tous les contrôles StyleKit qui sont des enfants ou des descendants de cet élément recevront le style alternatif. Les variations peuvent également être définies simultanément à plusieurs niveaux de la hiérarchie ; en cas de conflit, la variation la plus proche du contrôle est prioritaire.

Les variations d'instance sont définies dans le site Style ou Theme qu'elles affectent :

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"
    }
}

Elles sont appliquées à partir de l'application à l'aide de la propriété variations attached :

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"]
        }
    }
}

Les noms de variations auxquels l'application fait référence et qui ne sont pas définis dans le style (ou thème) actif sont ignorés silencieusement - ils agissent comme des indices que l'auteur du style peut choisir d'implémenter ou de ne pas traiter.

Variations de type

Les variations de type sont affectées à la propriété variations d'un ControlStyle spécifique, sans nécessiter de name. Contrairement aux variations d'instance - qui nécessitent l'acceptation explicite de l'application - les variations de type sont appliquées automatiquement à tous les contrôles d'un type donné chaque fois qu'ils sont des descendants du type de contrôle parent spécifié.

L'extrait suivant montre comment faire en sorte que tous les Buttons à l'intérieur d'un Frame soient distincts des boutons situés ailleurs :

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: []
    }
}

Étant donné que groupBox est rattaché à frame dans la hiérarchie des styles, les variations de type définies sur frame sont automatiquement héritées par groupBox. Pour ne pas en bénéficier, réinitialisez les variations du sous-type.

Ordre de propagation

Une variation de style est locale à Style ou Theme où elle est définie. Un thème ne peut pas masquer l'ensemble d'une variation de style définie dans le style - seules les propriétés individuelles de cette variation peuvent être modifiées, comme n'importe quelle autre propriété de style.

Par exemple, si Style et Theme actif définissent tous deux frame.variations, les deux tableaux de variation de type prennent effet pour Frame. L'ordre de résolution des propriétés individuelles est le suivant : les propriétés de variation du thème ont la priorité sur les propriétés directes du thème, qui ont la priorité sur les propriétés de variation du style, qui ont la priorité sur les propriétés directes du style.

Il en va de même pour les variations d'instance. Une StyleVariation définie dans une Theme est prioritaire sur les propriétés directes du Thème. Si une variation de style ayant le même name est également définie dans le Style, les deux prennent effet, en suivant le même ordre de résolution que celui décrit ci-dessus.

Dans l'extrait suivant, un bouton avec StyleVariation.variations: ["alert"] sera rouge dans le thème clair et cyan dans le thème foncé, avec une bordure de 4 pixels dans les deux cas. Étant donné que le thème sombre remplace button.background.radius par 6, cette propriété est prioritaire sur background.radius définie dans la variation du style. Par conséquent, le rayon du bouton est 6 dans le thème sombre, mais 0 dans le thème clair :

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"
        }
    }
}

Voir aussi Style, Theme, ControlStyle.variations, et StyleVariation.variations.

Documentation sur les propriétés

name : string

Le nom de cette variante.

Le nom identifie cette variante lorsqu'elle est utilisée comme instance variation.

Voir également variations et Instance Variations.

Documentation sur les biens attachés

StyleVariation.controlType : int

Cette propriété identifie le control type de l'élément auquel elle est attachée.

StyleKit Elle est utilisée pour résoudre type variations pour les contrôles descendants - si le controlType d'un élément parent correspond à un type de contrôle dont le variations est défini dans le Style, ces variations s'appliquent à tous les contrôles descendants.

Les contrôles intégrés définissent cette propriété automatiquement. Les contrôles personnalisés doivent la définir explicitement pour participer à la résolution des variations de type.

Voir également ControlStyle.variations et StyleReader.controlType.

StyleVariation.variations : list<string>

Cette propriété contient la liste des instance variations à activer pour un Control, et ses contrôles descendants.

Si plusieurs variations de la liste définissent la même propriété, la première de la liste est prioritaire.

Si des variations sont définies à la fois sur un élément parent et sur un contrôle descendant, les deux ensembles s'appliquent, les variations du contrôle étant prioritaires sur celles héritées du parent.

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"]
        }
    }
}

Voir également name.