Qt Quick提供了三种渐变图形效果:
- ConicalGradient,锥形渐变
- LinearGradient,线性渐变
- RadialGradient,径向渐变
效果
下图是我设计的示例效果:
图 1 渐变图形效果
如图所示,第一行为线性渐变,第二行为锥形渐变,第三行为径向渐变。
渐变元素与其他图形效果元素不同之处在于:渐变元素既可以用来改变一个已有的元素(如Image),也有可以独立使用。如你在示例效果图中看到的那样,每一行前两个是独立使用渐变元素的效果,后两个是讲渐变效果应用到其它元素上的效果。
源码
渐变效果较为简单,所有的示例都放在一个 qml 文档—— GradientExample.qml ——中,内容如下:
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;