QML环形进度条

HC_number1

于 2023-07-12 08:39:00 发布

阅读量289

点赞数

文章标签： qt

本文链接：https://blog.csdn.net/HC_number1/article/details/131673294

版权

import QtQuick 2.15
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtGraphicalEffects 1.15

ConicalGradient {
    id:circle
    height: 200
    width: 200

    property color barClr: "deepskyblue"
    property int barWidth: 20
    property color bgClr: "gray"
    property color textClr: "deepskyblue"
    property real max: 100
    property real min: 0
    property real value: 50
    property real percent: value/(max-min)
    property int fontSize: 18
    property string operation: "进度"

    antialiasing: true
    smooth: true
    source: Rectangle{
        height: circle.height
        width: circle.width
        color: "transparent"
        border.color: circle.bgClr
        border.width: circle.barWidth
        radius: width/2
    }
    gradient: Gradient{
        GradientStop { position: 0.0; color: circle.barClr }
        GradientStop { position: circle.percent; color: circle.barClr }
        GradientStop { position: circle.percent + 0.00001; color: circle.bgClr }
        GradientStop { position: 1.00001; color: circle.bgClr }
    }
    Text{
        anchors.centerIn: parent
        font.family: "微软雅黑"
        font.pointSize: fontSize
        color: circle.textClr
        text: circle.operation+"\n"+(circle.percent*100).toFixed()+" %"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

qml环形进度条