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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq78442761/article/details/86483959

目录

 

原理

源码

---

 

原理

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

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

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

程序运行截图如下：

 

源码

程序结构如下：

扫描二维码关注公众号，回复： 4965098 查看本文章

源码如下：

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()
        }
    }
}