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

一、简介

        Qt下利用定时器实现指针指示百分比的钟摆的动态显示效果，可以适用于显示百分比或进度条的进度或时间的刻度值（在圆形进度条上的一种改进）。效果如下：

二、详解

1、代码

（1）DashboardDisplay.h

#ifndef DASHBOARDPROCESS_H#define DASHBOARDPROCESS_H#include 
   
    #include 
    
     class DashboardProcess : public QWidget{    Q_OBJECTpublic:    DashboardProcess(QWidget *parent = 0);    ~DashboardProcess();    void setUsedValue(int value);    void setSize(int width, int height);protected:    void paintEvent(QPaintEvent *event);    void resizeEvent (QResizeEvent * event);    void mousePressEvent(QMouseEvent *event);    void mouseMoveEvent(QMouseEvent *event);    void mouseReleaseEvent(QMouseEvent *event);    void showEvent(QShowEvent *event);    void hideEvent(QHideEvent *event);private slots:    void slotUpdateTimer();    void slotGapTimer();private:    QPoint beginDrag;    bool bPressFlag;    int typeDisplay;    QPixmap pointPix;    int userdVaule;    int currentValue;    QLabel *currentValueLabel;    QTimer *updateTimer;    QTimer *gapTimer;    int gap;    int gapCount;};#endif // WIDGET_H
    
   

（2）DashboardDisplay.cpp

#include "DashboardDisplay.h"#define LOOPCOUNT 8DashboardProcess::DashboardProcess(QWidget *parent)    : QWidget(parent, Qt::FramelessWindowHint)    ,bPressFlag(false)    , currentValue(0)    , gap(0)    , gapCount(LOOPCOUNT){    QTextCodec *codec = QTextCodec::codecForName("utf8");    QTextCodec::setCodecForLocale(codec);    QTextCodec::setCodecForCStrings(codec);    QTextCodec::setCodecForTr(codec);    resize(159, 159);    setAutoFillBackground(false);    QPalette pal = palette();    pal.setColor(QPalette::Background, QColor(0xFF,0xFF,0xFF,0xFF));    setPalette(pal);    pointPix.load(":/dashboard_pointer_bg.png");    currentValueLabel = new QLabel(tr("0%"), this);    currentValueLabel->setFont(QFont("Arial", 10, QFont::Normal));    currentValueLabel->setAlignment(Qt::AlignCenter);    currentValueLabel->setStyleSheet("color:#19649f");    updateTimer = new QTimer(this);    updateTimer->setInterval(8);    connect(updateTimer, SIGNAL(timeout()), this, SLOT(slotUpdateTimer()));    gapTimer = new QTimer(this);    gapTimer->setInterval(10);    connect(gapTimer, SIGNAL(timeout()), this, SLOT(slotGapTimer()));}DashboardProcess::~DashboardProcess(){    if (updateTimer->isActive()) {        updateTimer->stop();    }    if (gapTimer->isActive()) {        gapTimer->stop();    }}void DashboardProcess::setUsedValue(int value){    userdVaule = value;}void DashboardProcess::showEvent(QShowEvent *event){    if (userdVaule > 0) {        updateTimer->start();    }    gap = 0;    gapCount = LOOPCOUNT;    currentValue = 0;}void DashboardProcess::hideEvent(QHideEvent *event){    if (updateTimer->isActive()) {        updateTimer->stop();    }    if (gapTimer->isActive()) {        gapTimer->stop();    }    currentValue = 0;    gap = 0;    gapCount = LOOPCOUNT;}void DashboardProcess::slotUpdateTimer(){    if (currentValue >= userdVaule) {        currentValue = userdVaule;        updateTimer->stop();        --gapCount;        gap = gapCount*4;        gapTimer->start();    }    else {        ++currentValue;    }    if (currentValue >= 0) {        currentValueLabel->setText(QString("%1%").arg(currentValue));    }    update();}void DashboardProcess::slotGapTimer(){    if (gap < 0) {        gapTimer->stop();        --gapCount;        if (gapCount > 0) {            gapTimer->start();            gap = gapCount * 4;        }        return;    }    --gap;    update();}void DashboardProcess::paintEvent(QPaintEvent *event){    QPainter painter(this);    QColor usedColor(165, 220, 62);    QColor freeColor(215, 215, 215);    painter.setRenderHint(QPainter::Antialiasing);    painter.setRenderHint(QPainter::SmoothPixmapTransform);    painter.save();    painter.translate(width() / 2, height() / 2);    painter.rotate(42);    painter.setPen(QPen(usedColor, 2));    for (int i = 0; i < currentValue ; ++i) {        painter.drawLine(0, 60, 0, 70);        painter.rotate(2.8);    }    painter.setPen(QPen(freeColor, 2));    for (int i = currentValue; i < 100 ; ++i) {        painter.drawLine(0, 60, 0, 70);        painter.rotate(2.8);    }    painter.restore();    painter.save();    painter.translate(width() / 2, height() / 2);    painter.rotate(-2);    if (gapCount < LOOPCOUNT && gapCount >= 0) {        if (gap >= gapCount * 3) {            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 + gapCount * 4 - gap);        }        else if (gap >= gapCount * 2) {            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 + gap - gapCount *2);        }        else if (gap >= gapCount) {            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 - (gapCount *2 - gap));        }        else {            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 - gap);        }    }    else {        if (currentValue >= 0) {            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2);        }    }    painter.drawPixmap(QRect((- pointPix.width())/2 , (- pointPix.height())/2, pointPix.width(), pointPix.height()) , pointPix);    painter.restore();}void DashboardProcess::resizeEvent(QResizeEvent *event){    currentValueLabel->setGeometry(0, 122, width(), 20);    move((QApplication::desktop()->width() - width())/2,  (QApplication::desktop()->height() - height())/2);    QWidget::resizeEvent(event);}/****************move everywhere*******************/void DashboardProcess::mousePressEvent(QMouseEvent *event){    bPressFlag = true;    beginDrag = event->pos();    QWidget::mousePressEvent(event);}void DashboardProcess::mouseMoveEvent(QMouseEvent *event){    if (bPressFlag) {        QPoint relaPos(QCursor::pos() - beginDrag);        move(relaPos);    }    QWidget::mouseMoveEvent(event);}void DashboardProcess::mouseReleaseEvent(QMouseEvent *event){    bPressFlag = false;    QWidget::mouseReleaseEvent(event);}

（3）main.cpp

#include "DashboardDisplay.h"#include 
   
    int main(int argc, char *argv[]){    QApplication a(argc, argv);    DashboardProcess w;    w.setUsedValue(70);    w.show();    return a.exec();}
   

2、编译运行

三、总结

（1）上述的数据在实际应用中还得微调，根据背景图片的不同rotate的角度不同，定时器的时间根据自己的需求加以调整。