本页内容

ConicalGradient QML Type

绘制锥形渐变。更多...

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

Item

属性

详细说明

渐变由两种或多种颜色定义,这些颜色会无缝过渡。颜色从指定的角度开始,并在比该角度大360度的角度处结束。

已应用的效果

以中心为轴旋转的锥形渐变

示例

以下示例演示了如何应用该效果。

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    ConicalGradient {
        anchors.fill: parent
        angle: 0.0
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
    }
}

属性文档

angle : real

此属性定义了在渐变位置 0.0 处渲染颜色的起始角度。位置值较大的颜色将渲染为更大的角度值,并实现无缝过渡。角度值按顺时针方向递增。

不同角度值的输出示例

角度为0的锥形梯度

45度角的锥形渐变

角度为185度的锥形梯度

角度:0 angle: 45 angle: 185
horizontalOffset: 0horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0verticalOffset: 0

cached : bool

此属性允许将效果输出像素缓存起来,以提升渲染性能。

每次更改源或效果属性时,缓存中的像素都必须更新。由于需要额外的内存缓冲区来存储效果输出,因此内存消耗会增加。

当源或效果属性进行动画处理时,建议禁用缓存。

默认情况下,该属性设置为false 。

gradient : Gradient

渐变由两种或多种颜色定义,这些颜色会无缝融合。颜色通过一组GradientStop 子项来指定,每个子项都定义了渐变上的一个位置(范围为0.0到1.0)以及一种颜色。每个GradientStop 的位置由position属性定义,颜色由color属性定义。

具有不同渐变值的输出示例

以中心为轴旋转的彩虹渐变

以中心为轴旋转的灰色渐变

从透明到黑色的渐变

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"
  }
}
angle: 0angle: 0angle: 0
horizontalOffset: 0horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0verticalOffset: 0

horizontalOffset : real

horizontalOffset 和verticalOffset 属性定义了渐变中心点相对于项目中心的偏移量(以像素为单位)。

其取值范围为 -inf 到 inf。默认情况下,这些属性设置为0 。

不同 horizontalOffset 值的输出示例

渐变中心向左偏移

以原点为中心的梯度

渐变中心向右偏移

horizontalOffset:-50 horizontalOffset:0 horizontalOffset:50
angle: 0angle: 0angle: 0
verticalOffset: 0verticalOffset: 0verticalOffset: 0

source : variant

此属性用于指定将被填充为渐变效果的元素。源元素会被渲染到一个中间像素缓冲区中,并根据渲染结果中的透明度值来确定渐变在显示中的可见性。源属性的默认值为未定义,此时整个效果区域都会被渐变填充。

不同源值的输出示例

渐变填充整个区域

被蝴蝶形状遮盖的渐变

源:未定义 source:
angle: 0angle: 0
horizontalOffset: 0horizontalOffset: 0
verticalOffset: 0verticalOffset: 0

注意: 不支持让效果包含自身,例如将源设置为该效果的父级。

verticalOffset : real

horizontalOffset 和 verticalOffset 属性定义了渐变中心点相对于项目中心的偏移量(以像素为单位)。

取值范围为 -inf 到 inf。默认情况下,这些属性设置为0 。

不同horizontalOffset 值下的输出示例

渐变中心向左偏移

以原点为中心的梯度

渐变中心向右偏移

horizontalOffset :-50 horizontalOffset: 0 horizontalOffset: 50
angle: 0angle: 0angle: 0
垂直偏移量:0垂直偏移量:0垂直偏移:0

© 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.