Gradient QML Type

Définit un remplissage en dégradé. Plus d'informations...

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

Propriétés

• orientation : enumeration
• stops : list<GradientStop>

Description détaillée

Un dégradé est défini par deux couleurs ou plus, qui seront mélangées de manière transparente.

Les couleurs sont spécifiées sous la forme d'un ensemble d'éléments enfants GradientStop, chacun d'entre eux définissant une position sur le dégradé entre 0,0 et 1,0 et une couleur. La position de chaque élément GradientStop est définie en définissant sa propriété position; sa couleur est définie à l'aide de sa propriété color.

Un dégradé sans arrêt est rendu par un remplissage blanc uni.

Notez que cet élément n'est pas une représentation visuelle d'un dégradé. Pour afficher un dégradé, utilisez un élément visuel (comme Rectangle) qui prend en charge l'utilisation des dégradés.

Exemple d'utilisation

L'exemple suivant déclare un élément Rectangle avec un dégradé commençant par le rouge, passant au jaune à un tiers de la hauteur du rectangle et se terminant par le vert :

Rectangle {
    width: 100; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

Performances et limites

Le calcul des dégradés peut s'avérer très coûteux par rapport à l'utilisation de remplissages en couleur unie ou d'images. Pensez à utiliser des dégradés pour les éléments statiques d'une interface utilisateur.

Depuis Qt 5.12, des dégradés linéaires verticaux et horizontaux peuvent être appliqués aux éléments. Si vous devez appliquer des dégradés angulaires, une combinaison de rotation et d'écrêtage peut être appliquée aux éléments concernés. Vous pouvez également utiliser QtQuick.Shapes::LinearGradient ou QtGraphicalEffects::LinearGradient. Ces approches peuvent toutes introduire des exigences de performance supplémentaires pour votre application.

L'utilisation d'animations impliquant des arrêts de dégradé peut ne pas donner le résultat souhaité. Une autre façon d'animer les dégradés consiste à utiliser des images pré-générées ou des dessins SVG contenant des dégradés.

Voir également GradientStop.

Documentation sur les propriétés

orientation : enumeration

Cette propriété permet de définir la direction du dégradé.

La valeur par défaut est Gradient.Vertical.

stops : list<GradientStop> [default read-only]

Cette propriété contient les arrêts de gradient décrivant le gradient.

Par défaut, cette propriété contient une liste vide.

Pour définir les arrêts de gradient, définissez-les en tant qu'enfants de la propriété Gradient.