QT自定义进度条ProgressBar

来源：互联网发布：mac os系统下载百度云编辑：程序博客网时间：2024/05/17 05:08
自定义进度条

效果图：
这里写图片描述
QML源码
ProgressBar.qml
import QtQuick 2.0Item{//滑动条    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<drag.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)    }}
阅读全文
0 0