条纹进度条

最开始学习qml的时候，想实现一个条纹进度条，当时还不熟悉动画，做不出来，只做了个静止的。qml学习和使用了快1年之际，把这个遗憾弥补下。

先上效果图，颜色取自Bootflat。

以下是源码，先上StripeProgressBar.qml

import QtQuick 2.7
import QtQuick.Controls 2.1


ProgressBar {
    id: control

    implicitWidth: Math.max(background ? background.implicitWidth : 0,
                            contentItem.implicitWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(background ? background.implicitHeight : 0,
                             contentItem.implicitHeight + topPadding + bottomPadding)
    property bool stripe: false
    property color backgroundColor: "#E6E9ED"
    property color stripeColor: "#5EBDE1"
    property color progressColor: "#3BAFDA"
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 20
        x: control.leftPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: control.availableWidth
        color: control.backgroundColor
        radius: 3
    }
    contentItem: Item{
        implicitWidth: 200
        implicitHeight: 20
        Rectangle {
            width: control.visualPosition * parent.width
            height: parent.height
            color: control.progressColor
            clip:true
            radius: 3
            Canvas{
                id:canvas
                visible: control.stripe
                width: parent.width*2
                height: parent.height
                contextType: "2d"
                function rounding(value,base)
                {
                    return Math.ceil(value/base)*base
                }
                SequentialAnimation {
                    loops: Animation.Infinite
                    running: canvas.visible
                    NumberAnimation {
                        target: canvas
                        property: "x"
                        from: 0
                        to: -canvas.height*2
                        duration: 1900
                    }
                    ScriptAction {
                        script: canvas.x = 0
                    }
                }
                onPaint: {
                    context.fillStyle=control.stripeColor
                    context.lineWidth=0
                    var startPostion=0
                    var stripeWidth=parent.height
                    var coupleStripeWidth=stripeWidth*2
                    var stopPosion=rounding(parent.width+coupleStripeWidth,coupleStripeWidth)

                    for(var loop=startPostion;loop<stopPosion;loop+=coupleStripeWidth)
                    {
                        context.beginPath();
                        context.moveTo(loop,0)
                        context.lineTo(loop+stripeWidth,0)
                        context.lineTo(loop+coupleStripeWidth,stripeWidth)
                        context.lineTo(loop+stripeWidth,stripeWidth)
                        context.lineTo(loop,0)
                        context.closePath();
                        context.fill()
                    }
                }
            }
        }
    }
}

再上main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Flow{
        anchors.fill: parent
        anchors.leftMargin: 100
        anchors.topMargin: 50
        spacing: 30
        StripeProgressBar{
            width: 400
            value: 0.3
        }
        StripeProgressBar{
            width: 400
            value: 0.3
            stripe: true
        }
        StripeProgressBar{
            width: 400
            value: 0.35
            stripe: true
            progressColor: "#8CC152"
            stripeColor: "#9DCA6B"
        }
        StripeProgressBar{
            width: 400
            value: 0.4
            stripe: true
            progressColor: "#3CBC9B"
            stripeColor: "#54C6A9"
        }
        StripeProgressBar{
            width: 400
            value: 0.5
            stripe: true
            progressColor: "#F6BB42"
            stripeColor: "#F7C55E"
        }
        StripeProgressBar{
            width: 400
            value: 0.55
            stripe: true
            progressColor: "#DA4453"
            stripeColor: "#DF5F6C"
        }
        StripeProgressBar{
            width: 400
            value: 0.6
            stripe: true
            progressColor: "#4A89DC"
            stripeColor: "#5D9CEC"
        }
        StripeProgressBar{
            width: 400
            value: 1.0
            stripe: true
            progressColor: "#967ADC"
            stripeColor: "#AC92EC"
        }
    }
}