QML矩形颜⾊横向渐变（gradient和LinearGradient）《矩形颜⾊横向渐变》
所有的热爱都要不遗余⼒，真正喜欢它便给它更⾼的优先级，和更多的时间吧！
QML其它⽂章请点击这⾥:
1. gradient 颜⾊渐变
常⽤ gradient 来实现渐变，如下：
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow{
id:            root
visible:true
width:300
height:200
title:qsTr("颜⾊渐变");
Rectangle {
id:                    rect
anchors.fill:          parent
border.width:1
gradient: Gradient {
GradientStop {  position:0.0;    color:"blue"}
GradientStop {  position:1.0;    color:"green"}
}
Text {
text:qsTr("我是竖向渐变")
color:"white"
}
}
}
如果想实现横向渐变的话，可以通过增加旋转，如下：
Rectangle {
id:                    rect
anchors.fill:          parent
border.width:1
rotation:270///--[Mark]
gradient: Gradient {
GradientStop {  position:0.0;    color:"blue"}
GradientStop {  position:1.0;    color:"green"}
}
...
}
enmmm，颜⾊是旋转了，但是其它都不得劲了，所以还是别旋转了，⼀转就都转，下⾯介绍另外的⼀种⽅法。
2. LinearGradient 线性渐变
LinearGradient 线性渐变，它可以从给定的起始点开始，到给定的结束点结束，使⼏种颜⾊⽆缝衔接渐变，代码和效果如下：
LinearGradient {///--[Mark]
anchors.fill: parent
start: Qt.point(0,0)
end: Qt.point(width,0)///1、横向渐变
//        end: Qt.point(0, height)    ///2、竖向渐变
//        end: Qt.point(width, height) ///3、横向渐变
gradient: Gradient {
GradientStop {  position:0.0;    color:"red"}
GradientStop {  position:0.5;    color:"blue"}
GradientStop {  position:1.0;    color:"green"}
}
}
图像如下：
完整代码如下：记得需要导⼊: import QtGraphicalEffects 1.12
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12///--[Mark]
ApplicationWindow{
id:            root
visible:true
width:300
height:200
title:qsTr("颜⾊渐变");
Rectangle {
id:                    rect
anchors.fill:          parent
border.width:1
LinearGradient {///--[Mark]
htmlborderanchors.fill: parent
start: Qt.point(0,0)
/
/            end: Qt.point(width, 0)      ///1.横向渐变
//            end: Qt.point(0, height)    ///2.竖向渐变
end: Qt.point(width, height)///3.斜向渐变
gradient: Gradient {
GradientStop {  position:0.0;    color:"red"}
GradientStop {  position:0.5;    color:"green"}
GradientStop {  position:1.0;    color:"blue"}
}
}
Text {
text:qsTr("1.横向渐变")
color:"white"
}
}
}
这是对矩形的颜⾊渐变，如果是图像呢？ LinearGradient 线性渐变也是神器，你不点下么？QML其它⽂章请点击这⾥:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。