运用QML制作圆形进度条效果

原文：http://blog.csdn.net/shado_walker/article/details/51684865

在QML中原声的进度条为水平或垂直的直线型进度条，可以用ProgressBar配合style: ProgressBarStyle{}进行实现，代码如下：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QtQml 2.2

Rectangle {
    id:root;
    color: "white";
    visible: true;
    width: 600;
    height: 600;

    Timer{
        interval: 300;
        running: true;
        repeat: true;
        onTriggered: {
            if(progressBar3.value >= 1)
                progressBar3.value = 0;
            progressBar3.value += 0.05;

            if(progressBar4.value >= 1)
                progressBar4.value = 0;
            progressBar4.value += 0.05;
        }

    }

    ProgressBar {
        id: progressBar3
        x: 83
        y: 226
        width: 397
        height: 23
        value: 0.01;
        style: ProgressBarStyle{
            id:progressBar3Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }

            progress: Rectangle{
                color: "#25b1e8";//
                clip: true;
                Rectangle{
                    anchors.left: parent.left;
                    //anchors.top: parent.top;
                    //anchors.bottom: parent.bottom;
                    height: progressBar3.width;
                    width: progressBar3.width;
                    LinearGradient{
                        anchors.fill: parent;
                        gradient: Gradient {
                            GradientStop {
                                position: 0.00;
                                color: "#ffffff";
                            }
                            GradientStop {
                                position: 1.00;
                                color: "#36d1e8";
                            }
                        }
                        start:Qt.point(0, 0);
                        end: Qt.point(parent.width, 0);
                    }
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar3Style.progress;
                }
            }
        }

    }

    ProgressBar {
        id: progressBar4
        x: 83
        y: 289
        width: 397
        height: 23
        value: 0.01;

        property color colorValue: Qt.rgba(37/255, 177/255, 232/255, 1);

        style: ProgressBarStyle{
            id:progressBar4Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
            }

            progress: Rectangle{
                //color: "#25b1e8";//
                //color: Math.round(currentProgress*100);
                color: progressBar4.colorValue;
                onColorChanged: {
                    console.log("onColorChanged")
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar4Style.progress;

                    onWidthChanged: {
                        console.log("onWidthChanged")
                        progressBar4.colorValue = Qt.rgba(1-currentProgress, 1-currentProgress, 1-currentProgress, 1)
                    }
                }

                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }
        }
    }

}

效果如下：

圆形进度条的实现代码如下：

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import Material 0.1 as Material
import QtQuick.Controls.Styles.Material 0.1 as MaterialStyle

// draws two arcs (portion of a circle)
// fills the circle with a lighter secondary color
// when pressed

Canvas {
    id: canvas
    width: 60
    height: 60
    antialiasing: true

    property color primaryColor: "orange"
    property color secondaryColor: "lightblue"

    property real centerWidth: width / 2
    property real centerHeight: height / 2
    //property real radius: Math.min(canvas.width, canvas.height) / 2
    property real radius: Math.min(canvas.width-10, canvas.height-10) / 2

    property real minimumValue: 0
    property real maximumValue: 100
    property real currentValue: 0

    // this is the angle that splits the circle in two arcs
    // first arc is drawn from 0 radians to angle radians
    // second arc is angle radians to 2*PI radians
    property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

    // we want both circle to start / end at 12 o'clock
    // without this offset we would start / end at 9 o'clock
    property real angleOffset: -Math.PI / 2

    signal clicked()

    onPrimaryColorChanged: requestPaint()
    onSecondaryColorChanged: requestPaint()
    onMinimumValueChanged: requestPaint()
    onMaximumValueChanged: requestPaint()
    onCurrentValueChanged: requestPaint()

    onPaint: {
        var ctx = getContext("2d");
        ctx.save();

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // fills the mouse area when pressed
        // the fill color is a lighter version of the
        // secondary color

        if (mouseArea.pressed) {
            ctx.beginPath();
            ctx.lineWidth = 10;
            ctx.fillStyle = Qt.lighter(canvas.secondaryColor, 1.25);
            ctx.arc(canvas.centerWidth,
                    canvas.centerHeight,
                    canvas.radius,
                    0,
                    2*Math.PI);
            ctx.fill();

            timer.running = true;
        }

        // First, thinner arc
        // From angle to 2*PI

        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = primaryColor;
        ctx.arc(canvas.centerWidth,
                canvas.centerHeight,
                canvas.radius,
                angleOffset + canvas.angle,
                angleOffset + 2*Math.PI);
        ctx.stroke();


        // Second, thicker arc
        // From 0 to angle

        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = canvas.secondaryColor;
        ctx.arc(canvas.centerWidth,
                canvas.centerHeight,
                canvas.radius,
                canvas.angleOffset,
                canvas.angleOffset + canvas.angle);
        ctx.stroke();

        ctx.restore();
    }

    Text {
        id: txt_progress
        anchors.centerIn: parent

        font.pixelSize: 16
        text: canvas.text
        color: canvas.primaryColor
    }

    MouseArea {
        id: mouseArea

        anchors.fill: parent
        onClicked: canvas.clicked()
        onPressedChanged: canvas.requestPaint()
    }


    Timer{
        id: timer
        interval: 300;
        running: false;
        repeat: true;
        onTriggered: {
            if(currentValue === 100) {
                currentValue = 0;
                txt_progress.text = "0"
            }
            currentValue += 1;
            txt_progress.text = currentValue.toString()+"%";
        }

    }
}

实现效果如下：

更改以上代码中的弧线宽度和半径长度，可以实现扇形进度（弧线变粗到半径，半径变短到0），实现效果如下：