StyleVariation QML Type

Définit des styles alternatifs pour certains contrôles. En savoir plus…

Ce type est en avant-première technologique et est susceptible d'être modifié.

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

Propriétés

• name : string

Propriétés associées

• controlType : int
• variations : list<string>

Description détaillée

Une StyleVariation vous permet de définir des styles alternatifs pouvant être appliqués à des contrôles spécifiques de 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 un aspect compact, ou faire en sorte que les boutons situés dans toutes les pages toolbars aient un aspect différent de celui des boutons situés ailleurs.

Variations d’instance

Les variations d’instance sont activées en définissant la propriété attachée « variations » 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 ce 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 prévaut.

Les variations d’instance sont définies dans l’ Style ou l’ Theme s qu’elles affectent :

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

Et elles sont appliquées depuis l’application à l’aide de la propriété attachée « variations » :

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 référencés depuis l’application qui ne sont pas définis dans le style (ou thème) actif sont ignorés sans message d’erreur — ils servent d’indications que l’auteur du style peut choisir d’implémenter ou de ne pas prendre en compte.

Variations de type

Les variations de type sont attribuées à la propriété ` variations ` d’un ` ControlStyle` spécifique, sans nécessiter de ` name`. Contrairement aux variations d’instance — qui exigent que l’application les active explicitement —, les variations de type s’appliquent automatiquement à tous les contrôles d’un type donné dès lors qu’ils sont des descendants du type de contrôle parent spécifié.

L’extrait de code suivant montre comment faire en sorte que tous les « Buttons » situés à l’intérieur d’un « Frame » se distinguent 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: []
    }
}

Comme les « groupBox » (boutons de type « frame ») héritent du type « » dans la hiérarchie des styles, les variations de type définies sur « frame » sont automatiquement héritées par « groupBox » également. Pour désactiver cette fonctionnalité, réinitialisez les variations pour le sous-type.

Ordre de propagation

Une StyleVariation est locale à Style ou Theme où elle est définie. Un thème ne peut pas masquer l’intégralité d’une StyleVariation définie dans le style — seules les propriétés individuelles qu’elle contient peuvent être redéfinies, comme n’importe quelle autre propriété de style.

Par exemple, si l’ Style et l’ Theme active définissent toutes deux frame.variations, les deux tableaux de variations de type s’appliquent à une Frame. L’ordre de résolution pour les propriétés individuelles est le suivant : les propriétés de variation du Theme ont priorité sur les propriétés directes du Theme, qui ont priorité sur les propriétés de variation du Style, lesquelles ont 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 un ` Theme ` a priorité sur les propriétés directes du thème. Si une `StyleVariation` présentant la même ` name ` est également définie dans le ` Style`, les deux s’appliquent, en suivant le même ordre de résolution que celui décrit ci-dessus.

Dans l'extrait de code suivant, un bouton dont la propriété « StyleVariation.variations: ["alert"] » est définie sera rouge dans le thème clair et cyan dans le thème sombre, avec une bordure de 4 pixels dans les deux cas. Comme le thème sombre remplace la propriété « button.background.radius » par « 6 », cette propriété l'emporte sur la valeur « background.radius » définie dans la variation du Style. Par conséquent, le rayon du bouton est finalement de 6 dans le thème sombre, mais de 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 également Style, Theme, ControlStyle.variations et StyleVariation.variations, {StyleKit Property Resolution}.

Documentation sur les propriétés

name : string

Le nom de cette variante.

Ce nom permet d'identifier cette variante lorsqu'elle est utilisée comme « instance variation ».

Voir également « variations » et « Instance Variations ».

Documentation relative aux propriétés associées

StyleVariation.controlType : int [attached]

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

StyleKit l'utilise pour résoudre l'type variations des contrôles descendants : si l'controlType d'un élément parent correspond à un type de contrôle dont les variations sont définies dans la propriété variations de l'Style, ces variations s'appliquent à tous les contrôles descendants.

Les contrôles intégrés définissent automatiquement cette propriété. 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> [attached]

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

Si plusieurs variantes de la liste définissent la même propriété, la première de la liste prévaut.

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 propres au contrôle ayant priorité 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.