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"
            }      

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"
            }
        }
    }

}