QT自定义进度条ProgressBar

自定义进度条

效果图：

QML源码

ProgressBar.qml

import QtQuick 2.0

Item{//滑动条
    id:root

    property string bgSource: ""
    property string fgSource: ""
    property string thumbSource: ""

    property real currentValue: 50   //当前值
    property real max: 100
    property real min: 0

    property real thumbStartPosX: 0 //进度按钮相对背景的位置
    property int touchHeightMin: 48//最小触摸高度

    property alias thumbPosX: thumb.x
    property alias mouseAreaEnabled :rootArea.enabled

    signal seek(real offset,bool pressed);

    implicitHeight: thumb.height > bg.height ? thumb.height : bg.height
    implicitWidth: thumbStartPosX < 0?bg.width - thumbStartPosX*2:bg.width

    //私有属性,这些值只是方便使用
    QtObject{
        id:privateValue;
        property real percent:(max-min)>0?(currentValue-min)/(max-min):0
        property real moveDistanceMax: bg.width - thumbStartPosX*2 - thumb.width
        property real moveDistanceMin: bg.x + thumbStartPosX
        property real currentMoveDistance:moveDistanceMax*percent

//        onPercentChanged: {
//            updateProgress();
//        }
    }
    //直接使用onPercentChanged会导致thumb.x初始化的值设置不成功，
    //因为初始化时onPercentChanged会触发
    //
    onCurrentValueChanged: {
        updateProgress();
    }
    onMaxChanged: {
        updateProgress();
    }
    onMinChanged: {
        updateProgress();
    }

    Component.onCompleted: {
        //console.log(" Component.onCompleted ")
        updateProgress();
    }

    Image{
        id:bg
        anchors.centerIn: parent
        source: bgSource
    }
    Image{
        id:fg
        anchors.top:bg.top
        anchors.left:bg.left
        width:thumb.x
        height:bg.height

        source:fgSource
        fillMode: Image.PreserveAspectCrop
        horizontalAlignment :Image.AlignLeft
        verticalAlignment: Image.AlignBottom
        clip: true
    }
    Image{
        id:thumb
        anchors.verticalCenter: parent.verticalCenter
        x:privateValue.currentMoveDistance
        source:thumbSource
    }

    MouseArea{
        id: rootArea
        anchors.centerIn: parent
        width: root.width
        height: root.height < touchHeightMin ? touchHeightMin : root.height
        drag.maximumX: privateValue.moveDistanceMax
        drag.minimumX: privateValue.moveDistanceMin
        drag.target: thumb
        //hoverEnabled: true
        onPressed: {
            if(mouseX - thumb.width/2>=drag.minimumX
                    &&mouseX - thumb.width/2<=drag.maximumX){
                thumb.x = mouseX - thumb.width/2;
            }else if(mouseX - thumb.width/2.minimumX)
            {
                thumb.x = drag.minimumX;
            }else if(mouseX - thumb.width/2>drag.maximumX){
                thumb.x = drag.maximumX;
            }
        }
        onPositionChanged: {
             returnVal(true);
        }

        onReleased: {
            //返回值，刷新进度条
            returnVal(false);
            //console.log("onReleased")
            //updateProgress();
        }
    }

    function returnVal(pressed ){
        var step = max-min;
        var offset = 0;
        if(privateValue.moveDistanceMax-privateValue.moveDistanceMin>0)
        {
            offset = (thumb.x)/(privateValue.moveDistanceMax-privateValue.moveDistanceMin)
                                     *step+min;
            root.seek(offset,pressed);
        }
    }

    function updateProgress(){
        if(!rootArea.pressed) {
            privateValue.percent =(max-min)>0?(currentValue-min)/(max-min):0;
            //console.log("privateValue.percent = "+privateValue.percent)
            //console.log("bg.width = "+bg.width)
            //console.log("thumbStartPosX= "+thumbStartPosX)
            //console.log("thumb.width = "+thumb.width)
            if(privateValue.percent > 0) {
                if(privateValue.percent<=1) {
                    thumb.x = (bg.width - thumbStartPosX*2 - thumb.width)*privateValue.percent;
                } else if(privateValue.percent > 1) {
                    thumb.x =privateValue.moveDistanceMax;
                } else {
                    thumb.x = 0;
                }
            } else {
                thumb.x = 0
            }
        }
        // fg.width = thumb.x
        //console.log("thumb.x = "+thumb.x)
    }
}