Qml进度条

基本上是官网例子上加了一些方法

ProgressBar {
    property color proColor: "#148014"
    property color proBackgroundColor: "#AAAAAA"
    property int proWidth: 2
    property real progress: 0
    property real proRadius: 3
    property alias interval: timer.interval

    function isRunning(){
        return(timer.running)
    }

    function onStart(){
        cProgress.progress = 0;
        timer.running = true;
    }

    function onStop(){
        timer.running = false;
    }

    id: cProgress
    anchors.centerIn: parent
    value: (progress/100)
    padding: 2

    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 16
        color: cProgress.proBackgroundColor
        radius: cProgress.proRadius
    }

    contentItem: Item {
        implicitWidth: 200
        implicitHeight: 10

        Rectangle {
            width: cProgress.visualPosition * parent.width
            height: parent.height
            radius: 2
            color: cProgress.proColor
        }
    }

    Timer{
        id: timer
        running: false
        repeat: true
        interval: 50
        onTriggered:{
            cProgress.progress++;
            if (cProgress.progress > 100){
                cProgress.onStop();
                return;
            }
        }
    }
}

show.gif

需要完整代码请访问QtQuickExamples