Sur cette page

RadialGradient QML Type

Dessine un dégradé radial. Plus d'informations...

Import Statement: import Qt5Compat.GraphicalEffects
Since: QtGraphicalEffects 1.0
Inherits:

Item

Propriétés

Description détaillée

Un dégradé est défini par deux couleurs ou plus, qui sont mélangées de manière transparente. Les couleurs partent du milieu de l'élément et se terminent sur les bords.

Effet appliqué

Exemple d'application

L'exemple suivant montre comment appliquer l'effet.

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    RadialGradient {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 0.5; color: "black" }
        }
    }
}

Documentation sur les propriétés

angle : real

Cette propriété définit la rotation du dégradé autour de son point central. La rotation n'est visible que si les propriétés horizontalRadius et verticalRadius ne sont pas égales. L'angle est donné en degrés et la valeur par défaut est 0.

Exemples de résultats avec différentes valeurs d'angle

angle : 0 angle : 45 angle : 90
horizontalOffset: 0horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0verticalOffset: 0
horizontalRadius: 100horizontalRadius: 100horizontalRadius: 100
verticalRadius: 300verticalRadius: 300verticalRadius: 300

cached : bool

Cette propriété permet de mettre en cache les pixels de sortie de l'effet afin d'améliorer les performances de rendu.

Chaque fois que les propriétés de la source ou de l'effet sont modifiées, les pixels du cache doivent être mis à jour. La consommation de mémoire augmente, car une mémoire tampon supplémentaire est nécessaire pour stocker la sortie de l'effet.

Il est recommandé de désactiver le cache lorsque les propriétés de la source ou de l'effet sont animées.

Par défaut, la propriété est définie sur false.

gradient : Gradient

Un dégradé est défini par deux couleurs ou plus, qui sont 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é de 0,0 à 1,0 et une couleur. La position de chaque GradientStop est définie par la propriété position. La couleur est définie par la propriété color.

Exemples de sortie avec différentes valeurs de dégradé

gradient :
Gradient {
  GradientStop {
   position: 0.000
   color: Qt.rgba(1, 0, 0, 1)
  }
  GradientStop {
   position: 0.167
   color: Qt.rgba(1, 1, 0, 1)
  }
  GradientStop {
   position: 0.333
   color: Qt.rgba(0, 1, 0, 1)
  }
  GradientStop {
   position: 0.500
   color: Qt.rgba(0, 1, 1, 1)
   }
  GradientStop {
   position: 0.667
   color: Qt.rgba(0, 0, 1, 1)
  }
  GradientStop {
   position: 0.833
   color: Qt.rgba(1, 0, 1, 1)
  }
  GradientStop {
   position: 1.000
   color: Qt.rgba(1, 0, 0, 1)
  }
}
gradient :
Gradient {
  GradientStop {
    position: 0.0
    color: "#F0F0F0"
  }
  GradientStop {
    position: 0.5
    color: "#000000"
  }
  GradientStop {
    position: 1.0
    color: "#F0F0F0"
  }
}
gradient :
Gradient {
  GradientStop {
    position: 0.0
    color: "#00000000"
  }
  GradientStop {
    position: 1.0
    color: "#FF000000"
  }
}
horizontalOffset: 0horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0verticalOffset: 0
horizontalRadius: 300horizontalRadius: 300horizontalRadius: 300
verticalRadius: 300verticalRadius: 300verticalRadius: 300
angle: 0angle: 0angle: 0

horizontalOffset : real

Les propriétés horizontalOffset et verticalOffset définissent le décalage en pixels du point central du dégradé par rapport au centre de l'élément.

Les valeurs vont de -inf à inf. Par défaut, ces propriétés sont définies sur 0.

Exemples de résultats avec différentes valeurs de horizontalOffset

décalage horizontal : -150 décalage horizontal : 0 horizontalOffset : 150
verticalOffset: 0verticalOffset: 0verticalOffset: 0
horizontalRadius: 300horizontalRadius: 300horizontalRadius: 300
verticalRadius: 300verticalRadius: 300verticalRadius: 300
angle: 0angle: 0angle: 0

horizontalRadius : real

Les propriétés horizontalRadius et verticalRadius définissent la forme et la taille du dégradé radial. Si les rayons sont égaux, la forme du gradient est un cercle. Si les rayons horizontaux et verticaux sont différents, la forme est elliptique. Les rayons sont exprimés en pixels.

La valeur est comprise entre -inf et inf. Par défaut, le rayon horizontal est lié à la largeur et verticalRadius est lié à la hauteur.

Exemples de sortie avec différentes valeurs de horizontalRadius

horizontalRadius : 300 horizontalRadius : 100
horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0
verticalRadius: 300verticalRadius: 300
angle: 0angle: 0
gradient: QQuickGradient(0xa05fb10)gradient: QQuickGradient(0xa05fb10)

source : variant

Cette propriété définit l'élément qui va être rempli avec un dégradé. L'élément source est rendu dans un tampon de pixels intermédiaire et les valeurs alpha du résultat sont utilisées pour déterminer la visibilité des pixels du dégradé dans l'affichage. La valeur par défaut de la source est indéfinie et, dans ce cas, toute la zone d'effet est remplie de dégradé.

Exemples de résultats avec différentes valeurs de source

source : undefined source : Image { source : images/butterfly.png }
horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0
horizontalRadius: 300horizontalRadius: 300
verticalRadius: 300verticalRadius: 300
angle: 0angle: 0

Remarque : il n'est pas possible de laisser l'effet s'inclure lui-même, par exemple en définissant la source sur le parent de l'effet.

verticalOffset : real

Les propriétés horizontalOffset et verticalOffset définissent le décalage en pixels du point central du dégradé par rapport au centre de l'élément.

Les valeurs vont de -inf à inf. Par défaut, ces propriétés sont définies sur 0.

Exemples de sortie avec différentes valeurs de horizontalOffset

horizontalOffset: -150 horizontalOffset: 0 horizontalOffset: 150
décalage vertical : 0décalage vertical : 0verticalOffset : 0
horizontalRadius: 300horizontalRadius: 300horizontalRadius: 300
verticalRadius: 300verticalRadius: 300verticalRadius: 300
angle: 0angle: 0angle: 0

verticalRadius : real

Les propriétés horizontalRadius et verticalRadius définissent la forme et la taille du dégradé radial. Si les rayons sont égaux, la forme du gradient est un cercle. Si les rayons horizontaux et verticaux sont différents, la forme est elliptique. Les rayons sont exprimés en pixels.

La valeur est comprise entre -inf et inf. Par défaut, horizontalRadius est lié à la largeur et verticalRadius est lié à la hauteur.

Exemples de sortie avec différentes valeurs de horizontalRadius

horizontalRadius: 300 horizontalRadius: 100
horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0
verticalRadius : 300verticalRadius : 300
angle: 0angle: 0
gradient: QQuickGradient(0xa05fb10)gradient: QQuickGradient(0xa05fb10)

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.