QT进度条控件封装(QML)

 演示效果,可指定大小,前景色,背景色

 1.背景色

//进度背景色
	background: Rectangle {
        implicitWidth: w
        implicitHeight: h
		color: cProgress.proBackgroundColor
        radius: cProgress.proRadius
	}

2.前景色

//当前进度色
	contentItem: Item {
        implicitWidth: w
        implicitHeight: h
		Rectangle {
            width: cProgress.visualPosition * w
            height: h
            radius: cProgress.proRadius
			color: cProgress.proColor
		}
	}

3.更新进度的计时器

Timer{
		id: timer
        running: run //默认不启动
        repeat: true //重复使用
        interval: 50 //每50毫秒响应一次
		onTriggered:{
            cProgress.progress++;//响应进度
            if (cProgress.progress > 100){
				cProgress.onStop();
				return;
			}
		}
	}

4.调用

 QmlProgress {
                w:parent.width
                h:10
                progress: 68
                proBackgroundColor: "yellow"
                proColor: "red"
            }

5.完整进度条控件代码与主界面qml代码

进度条控件

import QtQuick 2.7
import QtQuick.Controls 2.2
 
ProgressBar {
	property color proColor: "#148014"
	property color proBackgroundColor: "#AAAAAA"
	property int proWidth: 2
	property real progress: 0
    property real proRadius: 50
	property alias interval: timer.interval
    property int w: 500
    property int h: 50
    property bool run: true
 
    //取计时器状态
	function isRunning(){
		return(timer.running)
	}
 
    //启动计时器来更新进度值
	function onStart(){
		cProgress.progress = 0;
        timer.running = true;//通知计时器
	}
 
    //进度已满,停止计时器
	function onStop(){
		timer.running = false;
        //停止后重置进度,重新开始跑进度
        cProgress.progress=0;
        cProgress.onStart()
	}
 
	id: cProgress
    anchors.centerIn: parent
    value: (progress/100) //进度条默认值
	padding: 2
    width: w;
    height:h;
 
    //进度背景色
	background: Rectangle {
        implicitWidth: w
        implicitHeight: h
		color: cProgress.proBackgroundColor
        radius: cProgress.proRadius
	}
 
    //当前进度色
	contentItem: Item {
        implicitWidth: w
        implicitHeight: h
		Rectangle {
            width: cProgress.visualPosition * w
            height: h
            radius: cProgress.proRadius
			color: cProgress.proColor
		}
	}
 
	Timer{
		id: timer
        running: run //默认不启动
        repeat: true //重复使用
        interval: 50 //每50毫秒响应一次
		onTriggered:{
            cProgress.progress++;//响应进度
            if (cProgress.progress > 100){
				cProgress.onStop();
				return;
			}
		}
	}
}

主界面

import QtQuick 2.7
import QtQuick.Controls 2.2
 
ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: qsTr("基于QML实现的进度条示例")
 
    Column{
        width:parent.width-50
        anchors.centerIn: parent
        Rectangle{
            width: parent.width - 200
            height: parent.height
            QmlProgress {
                w:parent.width
                h:10
                progress: 68
                proBackgroundColor: "yellow"
                proColor: "red"
            }
        }
 
        Rectangle{
            width: parent.width - 100
            height: parent.height
            y:50
            QmlProgress {
                w:parent.width
                h:20
                progress: 68
                proBackgroundColor: "red"
                proColor: "purple"
            }
        }
 
        Rectangle{
            width: parent.width
            height: parent.height
            y:120
            QmlProgress {
                w:parent.width
                h:30
                progress: 68
                proBackgroundColor: "blue"
            }
        }
    }
 
}