QML制作环形进度条，使用ConicalGradient锥形渐变

QML中没有直接提供环形进度条组件，但是我们可以自己实现，如用Canvas、Shape、QPainter等等。我参照涛哥的代码（https://github.com/jaredtao/TaoQuick），使用QtGraphicalEffects模块的ConicalGradient实现了一个自己的环形进度条（https://github.com/gongjianbo/QmlComponentStyle）。

主要实现思路：通过 ConicalGradient 锥形渐变来区分进度条的两种颜色，然后使用 Rectangle 的 border 来作为 mask 截取出圆环部分。

实现效果和代码：

//CircleProgress
import QtQuick 2.12
import QtGraphicalEffects 1.0

ConicalGradient {
    id: control
    width: 200
    height: 200

    property int barWidth: 20
    property color foregroundColor: Qt.rgba(0,0.5,0,1)
    property color backgroundColor: Qt.rgba(0.7,0.7,0.7,1)
    property color textColor: Qt.rgba(0,0.5,0,1)
    property double minValue: 0
    property double maxValue: 100
    property double value: 0
    property double __progress: value/(maxValue-minValue)

    smooth: true
    antialiasing: true
    source: Rectangle {
        width: control.width
        height: control.height
        color: "transparent"
        border.color: control.backgroundColor
        border.width: control.barWidth
        radius: width / 2
    }

    gradient: Gradient {
        GradientStop { position: 0.0; color: control.foregroundColor }
        GradientStop { position: control.__progress; color: control.foregroundColor }
        GradientStop { position: control.__progress + 0.00001; color: control.backgroundColor }
        GradientStop { position: 1.0; color: control.backgroundColor }
    }

    //具体的设置可以再单独引出来
    Text{
        anchors.centerIn: parent
        text: (control.__progress*100).toFixed(2)+" %"
        font.pixelSize: 20
        color: control.textColor
    }
}

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("GongJianBo 1992")

    CircleProgress{
        id: circle_progress
        anchors.centerIn: parent
        value: 50

        //测试用，循环设置进度值
        NumberAnimation on value {
            from: 0
            to: 100
            duration: 5000
            running: true
            loops: Animation.Infinite
        }
    }
}