RadialGradient QML Type
Dessine un dégradé radial. En savoir plus…
| Import Statement: | import Qt5Compat.GraphicalEffects |
| Since: | QtGraphicalEffects 1.0 |
| Inherits: |
Propriétés
- angle : real
- cached : bool
- gradient : Gradient
- horizontalOffset : real
- horizontalRadius : real
- source : variant
- verticalOffset : real
- verticalRadius : real
Description détaillée
Un dégradé est défini par deux couleurs ou plus, qui s'estompent progressivement les unes dans les autres. Les couleurs partent du centre de l'élément et s'étendent jusqu'aux bords.
| Effet appliqué |
|---|
|
Exemple
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 lorsque les propriétés « horizontalRadius » et « verticalRadius » ne sont pas égales. L'angle est exprimé en degrés et la valeur par défaut est « 0 ».
| Exemples de rendu avec différentes valeurs d'angle | ||
|---|---|---|
|
|
|
| angle : 0 | angle : 45 | angle : 90 |
| horizontalOffset: 0 | horizontalOffset: 0 | horizontalOffset: 0 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 100 | horizontalRadius: 100 | horizontalRadius: 100 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 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 un tampon mémoire supplémentaire est nécessaire pour stocker la sortie de l'effet.
Il est recommandé de désactiver la mise en 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 s'estompent en douceur les unes dans les autres. Les couleurs sont spécifiées sous la forme d’un ensemble d’éléments enfants de type « GradientStop », dont chacun définit une position sur le dégradé comprise entre 0,0 et 1,0 ainsi qu’une couleur. La position de chaque élément « GradientStop » est définie en configurant la propriété « position ». La couleur est définie en configurant la propriété « color ».
| Exemples de rendu avec différentes valeurs de dégradé | ||
|---|---|---|
|
|
|
gradient : | gradient : | gradient : |
| horizontalOffset: 0 | horizontalOffset: 0 | horizontalOffset: 0 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| angle: 0 | angle: 0 | angle: 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 rendu avec différentes valeurs de `horizontalOffset` | ||
|---|---|---|
|
|
|
| horizontalOffset : -150 | horizontalOffset : 0 | horizontalOffset : 150 |
| verticalOffset: 0 | verticalOffset: 0 | verticalOffset: 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| angle: 0 | angle: 0 | angle: 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, le dégradé prend la forme d'un cercle. Si les rayons horizontal et vertical 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 à la hauteur.
| Exemples de résultats avec différentes valeurs de horizontalRadius | ||
|---|---|---|
|
| |
| horizontalRadius : 300 | horizontalRadius : 100 | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| verticalRadius: 300 | verticalRadius: 300 | |
| angle: 0 | angle: 0 | |
| gradient: QQuickGradient(0xa05fb10) | gradient: QQuickGradient(0xa05fb10) |
source : variant
Cette propriété définit l'élément qui sera rempli par un dégradé. L'élément source est rendu dans un tampon de pixels intermédiaire et les valeurs d'opacité issues du résultat sont utilisées pour déterminer la visibilité des pixels du dégradé à l'écran. La valeur par défaut de « source » n'est pas définie ; dans ce cas, toute la zone d'effet est remplie par le dégradé.
| Exemples de rendu avec différentes valeurs de source | ||
|---|---|---|
|
| |
| source : non défini | source : Image { source : images/butterfly.png } | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| horizontalRadius: 300 | horizontalRadius: 300 | |
| verticalRadius: 300 | verticalRadius: 300 | |
| angle: 0 | angle: 0 |
Remarque : il n'est pas possible de faire en sorte que l'effet s'applique à lui-même, par exemple en définissant la source comme étant 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 résultats avec différentes valeurs de horizontalOffset | ||
|---|---|---|
|
|
|
| horizontalOffset: -150 | horizontalOffset: 0 | horizontalOffset: 150 |
| verticalOffset : 0 | verticalOffset : 0 | décalage vertical : 0 |
| horizontalRadius: 300 | horizontalRadius: 300 | horizontalRadius: 300 |
| verticalRadius: 300 | verticalRadius: 300 | verticalRadius: 300 |
| angle: 0 | angle: 0 | angle: 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, le dégradé prend la forme d’un cercle. Si les rayons horizontal et vertical 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, la propriété horizontalRadius est liée à la largeur et la propriété verticalRadius est liée à la hauteur.
| Exemples de résultats avec différentes valeurs de « horizontalRadius » | ||
|---|---|---|
|
| |
| horizontalRadius: 300 | horizontalRadius: 100 | |
| horizontalOffset: 0 | horizontalOffset: 0 | |
| verticalOffset: 0 | verticalOffset: 0 | |
| rayon vertical : 300 | rayon vertical : 300 | |
| angle: 0 | angle: 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.













