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

你的名字 2023-07-17 09:59 45阅读 0赞

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

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

实现效果和代码：

![20200320220256917.png][]

//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.00001; 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
            }
        }
    }

[https_github.com_jaredtao_TaoQuick]: https://github.com/jaredtao/TaoQuick
[https_github.com_gongjianbo_QmlComponentStyle]: https://github.com/gongjianbo/QmlComponentStyle
[20200320220256917.png]: /images/20230528/d5f4d49436f645418f922b8cf4c77151.png