相关控件：GradientStop
Gradient即梯度，也就是我们常说的逐变色。由两种或多种颜色定义混合形成，颜色可以从位置0.0到1.0逐渐变化，它们将无缝混合。没有任何渐变停止的gradient呈现为实心白色填充。
本文: https://www.lovejia.win/blog/article/Gradient.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-gradient.html
参考译文：http://blog.csdn.net/foruok/article/details/43225263
效果分类
LinearGradient，线性渐变
ConicalGradient，锥形渐变
RadialGradient，径向渐变
属性说明
1、LinearGradient中的属性
cached：bool
指示是否缓存。
start：point
指定渐变开始的位置，与 end 配合，可以使用 Qt.point() 方法为其赋值，或者使用 “x,y” 这种字符串形式为其赋值，如 “0, 180” ，等价于 Qt.point(0, 180)。
end：point
指定渐变结束的位置，与 start 配合。
gradient：Gradient
指定渐变色。Gradient 类用来定义一个渐变色，它只有一个属性 stops:list，列表内的对象类型为 GradientStop 。GradientStop 假设渐变的路径从0.0开始到1.0结束，它有两个属性，一个是 position ，指定渐变路径上的某个点，另一个属性 color 指定这个点上的颜色。一个 Gradient 可以包含多个 GradientStop 。
source
这个属性指定渐变元素要应用的来源元素，比如你要用渐变改变一张图片，就指定 source 为图片对象（Image）的 id 即可。如果你不指定，那渐变元素就自个用渐变色绘制一个图元。
2、ConicalGradient中的属性
angle：real
指定渐变的起始角度，注意是度：45°，180°之类的，不是弧度。 Gradient 属性里的渐变起始点 0.0 处的颜色与这个角度对应。应用渐变时按照顺时针方向，随着角度变大，Gradient里的颜色也向着 1.0 这个位置变化。
cached：bool
指示是否缓存。
horizontalOffset：real
偏离中心点的水平偏移量。。
verticalOffset：real
偏离中心点的垂直偏移量。。
gradient：Gradient
参见LinearGradient的gradient属性。。
source
参见LinearGradient的source属性。
3、RadialGradient中的属性
angle：real
指定渐变相对于中心点的旋转角度。
注意：这个和 ConicalGradient 的 angle 属性的含义不同。
cached：bool
指示是否缓存
horizontalOffset：real
与 ConicalGradient 的同名属性含义类似。
verticalOffset：real
与 ConicalGradient 的同名属性含义类似。
horizontalRadius：real
指定水平方向的半径。
verticalRadius：real
指定垂直方向的半径，与 horizontalRadius 结合，就定义了一个椭圆了。
gradient：Gradient
参见LinearGradient的gradient属性
source
参见LinearGradient的source属性
功能简述
Gradient元素与其他图形效果元素不同之处在于：渐变元素既可以用来改变一个已有的元素（如Image），也有可以独立使用。Gradient与使用纯色填充或图像相比，计算梯度可能在计算上是昂贵的。考虑在用户界面中为静态项目使用渐变。
例
以下示例宣布其渐变以红色开始，在矩形高度的三分之一处混合为黄色，并以绿色结尾：
1
2
3
4
5
6
7
8
9
| import QtQuick 2.2
Rectangle {
width: 100; height: 100
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
}
|
注意：这个组件本身不是可视化的，要显示渐变，使用Rectangle这样支持渐变的可视化组件。
渐变效果较为简单，所有的示例都放在一个 qml 文档： GradientExample.qml ——中，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
| import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2
Rectangle {
id: example;
anchors.fill: parent;
signal back();
Button {
anchors.right: parent.right;
anchors.top: parent.top;
anchors.margins: 4;
text: "Back";
onClicked: example.back();
}
Text {
id: linearLabel;
anchors.left: parent.left;
anchors.top: parent.top;
anchors.margins: 4;
text: "LinearGradient";
font.bold: true;
}
Row {
id: linears;
anchors.left: parent.left;
anchors.top: linearLabel.bottom;
anchors.margins: 4;
spacing: 8;
LinearGradient {
width: 100;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#80222222";}
GradientStop{ position: 0.9; color: "#FFFFFFFF";}
}
start: Qt.point(0, 0);
end: Qt.point(0, 180);
}
LinearGradient {
width: 100;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#FFFF0000";}
GradientStop{ position: 0.3; color: "#FFFFA000";}
GradientStop{ position: 0.5; color: "#A0FF4000";}
GradientStop{ position: 1.0; color: "#FF800FFF";}
}
start: Qt.point(0, 0);
end: Qt.point(80, 180);
}
Image {
id: butterfly;
source: "butterfly.png";
width: 180;
height: 180;
smooth: true;
sourceSize: Qt.size(180, 180);
}
LinearGradient {
source: butterfly;
width: 180;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#222222";}
GradientStop{ position: 0.9; color: "#F8884F";}
}
start: Qt.point(0, 0);
end: Qt.point(180, 180);
}
}
Text {
id: conicalLabel;
anchors.left: parent.left;
anchors.top: linears.bottom;
anchors.margins: 4;
text: "ConicalGradient";
font.bold: true;
}
Row {
id: conicals;
anchors.left: parent.left;
anchors.top: conicalLabel.bottom;
anchors.margins: 4;
spacing: 8;
ConicalGradient {
width: 100;
height: 180;
angle: 45;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#80222222";}
GradientStop{ position: 0.9; color: "#FFFFFFFF";}
}
}
ConicalGradient {
width: 100;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#FFFF0000";}
GradientStop{ position: 0.3; color: "#FFFFA000";}
GradientStop{ position: 0.5; color: "#A0FF4000";}
GradientStop{ position: 1.0; color: "#FF800FFF";}
}
horizontalOffset: 20;
verticalOffset: 40;
}
Image {
id: conicalOrig;
source: "butterfly.png";
width: 180;
height: 180;
smooth: true;
sourceSize: Qt.size(180, 180);
}
ConicalGradient {
source: conicalOrig;
width: 180;
height: 180;
angle: 60;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#A22222";}
GradientStop{ position: 0.9; color: "#2888F4";}
}
}
}
Text {
id: radialLabel;
anchors.left: parent.left;
anchors.top: conicals.bottom;
anchors.margins: 4;
text: "RadialGradient";
font.bold: true;
}
Row {
id: radials;
anchors.left: parent.left;
anchors.top: radialLabel.bottom;
anchors.margins: 4;
spacing: 8;
RadialGradient {
width: 100;
height: 180;
angle: 60;
horizontalRadius: 50;
verticalRadius: 90;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#222222";}
GradientStop{ position: 0.9; color: "#00FF0F";}
}
}
RadialGradient {
width: 100;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#FFFF0000";}
GradientStop{ position: 0.3; color: "#FFFFA000";}
GradientStop{ position: 0.5; color: "#A0FF4000";}
GradientStop{ position: 1.0; color: "#FF800FFF";}
}
horizontalOffset: 20;
horizontalRadius: 40;
verticalRadius: 40;
verticalOffset: 40;
}
Image {
id: radialOrig;
source: "butterfly.png";
width: 180;
height: 180;
smooth: true;
sourceSize: Qt.size(180, 180);
}
RadialGradient {
source: radialOrig;
width: 180;
height: 180;
angle: 120;
horizontalRadius: 40;
verticalRadius: 80;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#A22222";}
GradientStop{ position: 1.0; color: "#2888F4";}
}
}
}
}
|
下面的代码则是为 source 属性指定了一个 Image 对象，使用 Image 来显示一个图片：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| Image {
id: butterfly;
source: "butterfly.png";
width: 180;
height: 180;
smooth: true;
sourceSize: Qt.size(180, 180);
}
LinearGradient {
source: butterfly;
width: 180;
height: 180;
gradient: Gradient {
GradientStop{ position: 0.0; color: "#222222";}
GradientStop{ position: 0.9; color: "#F8884F";}
}
start: Qt.point(0, 0);
end: Qt.point(180, 180);
}
|
注意：使用 LinearGradient 来生成一个叠加了渐变效果的新元素，当我们为 LinearGradient 指定了 source 属性时，Qt Quick会在 source 指定的元素上应用渐变效果，生成一个新的元素，而原对象不会被改变。
