QML类型说明-LinearGradient QML类型说明-L

LinearGradient
ImportStatement:import QtGraphicalEffects 1.0
Since:QtGraphicalEffects 1.0
Inherits:Item

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

DetailedDescription
两个或两个以上的颜色，混合无缝连接。颜色从给定的开始点开始，在给定的结束点结束。

效果
文章图片

下面的代码展示了怎样应用这个效果。
importQtQuick 2.0
importQtGraphicalEffects 1.0

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" }
}
}
}

PropertyDocumentation
cached :bool
是否缓存输出，缓存提高渲染性能但消耗更多内存。每当源或者影响属性发生变化，缓存都会更新。如果源或影响是动画，推荐关闭缓存。默认为假。

end :variant
渐变位置为1.0的点。在较小位置的色彩向终点线性渐变。默认值为Qt.point(0, height)。设置默认的开始和结束点。渐变将沿着Y轴填充整个高。
下面是示例：

end的影响
文章图片	文章图片	文章图片
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表示，定义在position属性中，颜色定义在color属性中。

Gradient的影响
文章图片	文章图片	文章图片
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的影响
文章图片	文章图片
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)

注意source不支持影响自身，所以不能设置父到source上。

start :variant
渐变位置为0.0的点。start的点和end的点连成直线，颜色按其垂线的平行线渐变渲染。默认值是Qt.point(0, 0)。设置start和end为默认值，将在整个区域沿Y轴线性渐变整个高。

Start的影响
文章图片	文章图片	【QML类型说明-LinearGradient】文章图片
start: QPoint(0, 0)	start: QPoint(150, 150)	start: QPoint(300, 0)
end: QPoint(300, 300)	end: QPoint(300, 300)	end: QPoint(300, 300)