QML创建横向渐变条方法

本文长期连接，转发请先点赞留言

起源：

因为刚开始学QML，刚好学到渐变这一张，发现渐变是从上到下的，也就是说垂直方向的渐变。于是想试着做一下水平，也就是横着的渐变。结果网上什么奇葩都有。还碰上一个哥们，说是要加入会员还是订阅啥的才能看，关键要给19.9一月。我只想说：你以为你是什么青瓜萝卜皮。

实现方式：

比如我先画一个Rectangle，定义好位置，边框啥的，代码如下：

Rectangle{
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
    }

效果如图：

因为没有设置color属性，所以默认是白色的。

如果我直接使用gradient: Gradient的话，代码在如下：

Rectangle{
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
        gradient: Gradient{
            GradientStop{position: 0.0;color:"blue"}
            GradientStop{position: 0.33;color:"red"}
            GradientStop{position: 0.66;color: "yellow"}
            GradientStop{position: 0.99;color: "green"}
        }
    }

效果如图：
可以发现是纵向的渐变。那得想个办法，设置横向的渐变。于是，查了下往上以及官网，代码如下：

Rectangle{
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
    }

    LinearGradient{
        anchors.fill: rectDraw
        gradient: Gradient{
            GradientStop{position: 0.0;color:"blue"}
            GradientStop{position: 0.33;color:"red"}
            GradientStop{position: 0.66;color: "yellow"}
            GradientStop{position: 0.99;color: "green"}
        }
        source: rectDraw
        start: Qt.point(0,0)
        end:Qt.point(rectDraw.width,0)
    }

效果如下：

可能的问题：

因为我也是初学，摸索中成长，所以实现方式是这样。如果你有更好的实现方式，欢迎留言。最后，留下完整的代码：

import QtQuick 2.8
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width:root.width
    height: root.height
    title: qsTr("Hello World")//只有加了qsTr才能被国际化的翻译

    Image {
        id: root
        source: "images/background.png"
        width: 960
        height: 640
    }

    Image {
        id: pinwheel
        source: "images/pinwheel.png"
        anchors.centerIn: parent
        Behavior on rotation {
            NumberAnimation{
                duration:250
            }
        }
    }

    MouseArea{
        anchors.fill: pinwheel
        onClicked: {
             pinwheel.rotation-=360

        }
    }

    MouseArea{
        anchors.fill: root
        propagateComposedEvents: true
        onClicked:{
            pinwheel.rotation+=360

            mouse.accepted=false
        }
    }

    Text {
        id: textCenter
        text: qsTr("Hello World")
        x:257
        y:166
        horizontalAlignment: Text.AlignVCenter
    }

    Rectangle{
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
    }

    LinearGradient{
        anchors.fill: rectDraw
        gradient: Gradient{
            GradientStop{position: 0.0;color:"blue"}
            GradientStop{position: 0.33;color:"red"}
            GradientStop{position: 0.66;color: "yellow"}
            GradientStop{position: 0.99;color: "green"}
        }
        source: rectDraw
        start: Qt.point(0,0)
        end:Qt.point(rectDraw.width,0)
    }

}

注意：import QtGraphicalEffects 1.0 导入这个才能使用LinearGradient。