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。