qml RadialGradient详解

news2025/1/17 10:18:52

1、概述

RadialGradient是QML中用于创建径向渐变效果的一种类型。它允许您定义从中心向外辐射的颜色渐变，可以应用于各种QML可视组件上，如Rectangle、Image等，以创建出丰富的视觉效果。

2、重要属性

angle：定义渐变围绕其中心点的旋转角度。当水平半径和垂直半径不相等时，旋转效果才可见。
cached：布尔值，用于控制是否缓存渐变效果以提高渲染性能。但请注意，缓存会增加内存消耗。
gradient：Gradient类型，定义了渐变中的颜色停靠点（GradientStop）。每个颜色停靠点指定了渐变上的一个位置和对应的颜色。
horizontalOffset：渐变中心点相对于项目中心的水平偏移量（以像素为单位）。
horizontalRadius：径向渐变的水平半径，定义了渐变的形状和大小。如果水平半径和垂直半径相等，则渐变为圆形；如果不等，则为椭圆形。
source：变量类型，定义了将使用渐变填充的项目。源项目被渲染到一个中间的像素缓冲区，并使用结果的alpha值来确定渐变像素的可见性。如果未定义，则整个效果区域将被渐变填充。
verticalOffset：渐变中心点相对于项目中心的垂直偏移量（以像素为单位）。
verticalRadius：径向渐变的垂直半径，与horizontalRadius共同定义了渐变的形状和大小。

Window {
    width: 300; height: 300
    visible: true

    RadialGradient {
        anchors.fill: parent
        angle: 45           // 设置渐变旋转角度
        horizontalOffset: 0 // 水平偏移量
        verticalOffset: -0  // 垂直偏移量
        horizontalRadius: 150 // 水平半径
        verticalRadius: 200  // 垂直半径
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" } // 渐变开始点的颜色和位置
            GradientStop { position: 0.5; color: "blue" }  // 中间点的颜色和位置
            GradientStop { position: 1.0; color: "black" } // 渐变结束点的颜色和位置
        }
    }



}