Qt工作笔记-QML自定义圆形进度条（C++后端处理数据）

最新推荐文章于 2025-06-18 10:39:03 发布

IT1995

最新推荐文章于 2025-06-18 10:39:03 发布

阅读量6.4k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： C/C++ Qt 文章标签： C++ QML Qt

本文链接：https://blog.csdn.net/qq78442761/article/details/86483959

C/C++ 同时被 2 个专栏收录

964 篇文章

订阅专栏

588 篇文章

订阅专栏

本文介绍如何使用QML与C++结合，通过Canvas组件和定时器实现实时更新的进度圆形显示。文章详细展示了如何将C++类映射到QML环境中，并通过计时器获取进度值，最终在QML界面中动态展示进度变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理

源码

原理

1.使用QML中的Canvas绘制圆形，用一种颜色，说明是未读取，再用另外一种颜色覆盖到原来的颜色！说明进度！

2.使用setContextProperty把C++中的某个继承了QObject的类映射到QML中！

3.QML中有一个计时器，去实时读取QObject中的进度！

程序运行截图如下：

源码

程序结构如下：

源码如下：

mycicular.h

#ifndef MYCICULAR_H
#define MYCICULAR_H

#include <QObject>

QT_BEGIN_NAMESPACE
class QTimer;
QT_END_NAMESPACE

class MyCicular : public QObject
{
    Q_OBJECT
public:
    MyCicular(QObject *parent = 0);
    ~MyCicular();

    Q_INVOKABLE int getCurrentValue();
    Q_INVOKABLE void finished();

protected slots:
    void addValueTimeout();

private:

    int m_endValue;
    int m_startValue;
    QTimer *m_timer;
};

#endif // MYCICULAR_H

main.cpp

#include <QApplication>
#include <QQuickView>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "mycicular.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    MyCicular myCicular;
    QQuickView view;
    view.engine()->rootContext()->setContextProperty("canvas", &myCicular);
    view.setResizeMode(QQuickView::SizeViewToRootObject);
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();


    return a.exec();
}

mycicular.cpp

#include "mycicular.h"
#include <QTimer>
#include <QDebug>
#include <QMessageBox>

MyCicular::MyCicular(QObject *parent) : QObject(parent)
{

    m_startValue = 0;
    m_endValue = 1000;

    m_timer = new QTimer;
    connect(m_timer, SIGNAL(timeout()), this, SLOT(addValueTimeout()));

    m_timer->start(5);
}

MyCicular::~MyCicular()
{
    delete m_timer;
}

int MyCicular::getCurrentValue()
{
    return ((double)m_startValue / (double)m_endValue) * 360;
}

void MyCicular::finished()
{
    QMessageBox::information(NULL, "提示", "程序读取结束");
}

void MyCicular::addValueTimeout()
{
    m_startValue++;
    if(m_startValue >= m_endValue){

        m_timer->stop();
    }
}

CircularProgress.qml

import QtQuick 2.4

Canvas{

    property int radius: 100
    property real progress: 0
    property real arcWidth: 2

    id:canvas
    width: 2 * radius + arcWidth
    height: 2 * radius + arcWidth

    Text{

        anchors.centerIn: parent
        font.pointSize: 15
        text: Math.floor((parent.progress / 360) * 100) + "%"
    }


    onPaint:{

        var ctx = getContext("2d")

        ctx.beginPath()
        ctx.strokeStyle = "#AAAAAA"
        ctx.lineWidth = 2
        ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2, false)
        ctx.stroke()

        var r = progress * Math.PI / 180
        ctx.beginPath()
        ctx.strokeStyle = "#148014"
        ctx.lineWidth = 2

        ctx.arc(width / 2, height / 2, radius, 0 - 90 * Math.PI / 180
                , r - 90 * Math.PI / 180, false)
        ctx.stroke()
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

Item {

    visible: true
    width: 400
    height: 300

    CircularProgress{

        id: circularProgress
        anchors.centerIn: parent
    }

    Timer{

        id: timer
        running: true
        repeat: true
        interval: 100
        onTriggered: {

            console.log(circularProgress.progress)
            if(circularProgress.progress == 360){
                timer.running = false
                canvas.finished()
            }


            circularProgress.progress = canvas.getCurrentValue()
            circularProgress.requestPaint()
        }
    }
}