线性渐变 QML 类型

绘制线性渐变。更多...

导入声明	import Qt5Compat.GraphicalEffects
自	QtGraphicalEffects 1.0
继承	Item

所有成员列表，包括继承成员

属性

cached : bool
end : variant
gradient : Gradient
source : variant
start : variant

详细描述

渐变由两种或多种颜色组成，这些颜色融合在一起。颜色从给定的起点开始，到给定的终点结束。

应用效果

示例

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

import QtQuick
import Qt5Compat.GraphicalEffects

Item {
    width: 300
    height: 300

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(0, 300)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
    }
}

属性文档

cached : bool

此属性允许将效果输出像素缓存，以提高渲染性能。

每当源或效果属性更改时，缓存中的像素必须更新。内存消耗增加，因为需要一个额外的内存缓冲区来存储效果输出。

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

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

end : variant

此属性定义了颜色在梯形位置为 1.0 处渲染的结束点。较小位置值的颜色呈线性向起点渲染。该点以像素为单位给出，默认值为 Qt.point(0, height)。为 start 和 end 设置默认值会导致沿 y 轴的全高度线性渐变。

不同结束值的输出示例

end: Qt.point(300, 300)	end: Qt.point(150, 150)	end: Qt.point(300, 0)
start: Qt.point(0, 0)	start: Qt.point(0, 0)	start: Qt.point(0, 0)

gradient : Gradient

渐变由两种或多种颜色组成，这些颜色无缝融合。颜色作为一组 GradientStop 子项指定，其中每个子项定义渐变从 0.0 到 1.0 的位置和一个颜色。每个 GradientStop 的位置由位置属性定义，而颜色由颜色属性定义。

不同渐变值的输出示例

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" } }
start: Qt.point(0, 0)	start: Qt.point(0, 0)	start: Qt.point(0, 0)
end: Qt.point(300, 300)	end: Qt.point(300, 300)	end: Qt.point(300, 300)

source : variant

此属性定义了将要被渐变填充的项。源项被渲染到中间像素缓冲区中，并将结果中的alpha值用于确定显示中渐变像素的可视性。源默认值为未定义，在这种情况下，整个效果区域将被渐变填充。

不同源值的输出示例

source: undefined	source: Image { source: images/butterfly.png }
start: Qt.point(0, 0)	start: Qt.point(0, 0)
end: Qt.point(300, 300)	end: Qt.point(300, 300)

注意： 效果不允许包含自身，例如通过将源设置为效果的父元素。

start : variant

此属性定义了渲染渐变位置处0.0颜色时的起始点。较大位置值的颜色将线性渲染到终点。该点以像素表示，默认值是Qt.point(0, 0)。设置起始和end的默认值将导致沿y轴全高的线性渐变。

不同开始值的输出示例

start: QPoint(0, 0)	start: QPoint(150, 150)	start: QPoint(300, 0)
end: QPoint(300, 300)	end: QPoint(300, 300)	end: QPoint(300, 300)