本文共 3134 字，大约阅读时间需要 10 分钟。

目录

原理

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

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

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

程序运行截图如下：

源码

程序结构如下：

源码如下：

mycicular.h

#ifndef MYCICULAR_H#define MYCICULAR_H#include 
   
    QT_BEGIN_NAMESPACEclass QTimer;QT_END_NAMESPACEclass MyCicular : public QObject{    Q_OBJECTpublic:    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 
   
    #include 
    
     #include 
     
      #include 
      
       #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 
   
    #include 
    
     #include 
     
      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.4Canvas{    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.7import QtQuick.Controls 2.0Item {    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()        }    }}

转载地址：https://it1995.blog.csdn.net/article/details/86483959 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！