QT实现自定义带有提示信息的透明环形进度条

1. 概述

做界面开发的童鞋可能都会遇到这样的需求，就是有一些界面点击了之后比较耗时的操作，需要界面给出一个环形进度条的进度反馈信息. 如何来实现这样的需求呢，话不多说，上效果

透明进度条

2. 代码实现

waitfeedbackprogressbar.h

#ifndef WAITFEEDBACKPROGRESSBAR_H
#define WAITFEEDBACKPROGRESSBAR_H

#include <QWidget>
#include <QTimer>
#include "customcomponent_global.h"

class CUSTOMCOMPONENT_EXPORT WaitFeedbackProgressBar : public QWidget
{
    Q_OBJECT
public:
    WaitFeedbackProgressBar(QWidget *parent = nullptr);
    ~WaitFeedbackProgressBar();

    void start();
    void stop();

protected:
    void paintEvent(QPaintEvent *event);

private slots:
    void updaterRotation();

private:
    QTimer *m_timer = nullptr;
    int m_rotation = 0;
};

#endif  // WAITFEEDBACKPROGRESSBAR_H

waitfeedbackprogressbar.cpp

#include "waitfeedbackprogressbar.h"

#include <QPainter>
#include <QPainterPath>

WaitFeedbackProgressBar::WaitFeedbackProgressBar(QWidget *parent)
    : QWidget(parent)
{
    m_timer = new QTimer;
    connect(m_timer, &QTimer::timeout,
            this, &WaitFeedbackProgressBar::updaterRotation);
}

WaitFeedbackProgressBar::~WaitFeedbackProgressBar()
{
    if (m_timer != nullptr) {
        disconnect(m_timer, &QTimer::timeout,
                this, &WaitFeedbackProgressBar::updaterRotation);
        delete m_timer;
        m_timer = nullptr;
    }
}

void WaitFeedbackProgressBar::start()
{
    if (m_timer == nullptr) {
        return;
    }
    m_timer->start(3);
}

void WaitFeedbackProgressBar::stop()
{
    if (m_timer == nullptr) {
        return;
    }
    m_timer->stop();
}

void WaitFeedbackProgressBar::updaterRotation()
{
    m_rotation++;
    if(m_rotation == 360){
        m_rotation = 0;
    }
    update();
}

void WaitFeedbackProgressBar::paintEvent(QPaintEvent *event)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    QConicalGradient gra(QPoint(0,0),0);
    gra.setColorAt(0, QColor("#3BB6FE"));
    gra.setColorAt(1, QColor("#FFFFFF"));
    QBrush brush(gra);

    int radis = 40;
    int sider = 5;
    QRect rect(-radis, -radis, radis * 2, radis * 2);
    QPainterPath path;
    path.arcTo(rect, 0, 270);

    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(sider, sider, -sider, -sider));

    path = path - subPath;
    painter.setBrush(brush);
    painter.setPen(Qt::NoPen);
    painter.rotate(m_rotation);
    painter.drawPath(path);
}

waitfeedbackdialog.h

#ifndef WAITFEEDBACKDIALOG_H
#define WAITFEEDBACKDIALOG_H

#include <QDialog>
#include "dialog_global.h"

namespace Ui {
class WaitFeedbackDialog;
}

class DIALOG_EXPORT WaitFeedbackDialog : public QDialog
{
    Q_OBJECT
public:
    explicit WaitFeedbackDialog(QWidget *parent = nullptr);

    void start();
    void stop();

signals:

private:
    Ui::WaitFeedbackDialog *ui;
};

#endif  // WAITFEEDBACKDIALOG_H

waitfeedbackdialog.cpp

#include "waitfeedbackdialog.h"
#include "ui_waitfeedbackdialog.h"

WaitFeedbackDialog::WaitFeedbackDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::WaitFeedbackDialog)
{
    ui->setupUi(this);

    setWindowFlags(Qt::FramelessWindowHint | windowFlags());
    setAttribute(Qt::WA_TranslucentBackground, true);
}

void WaitFeedbackDialog::start()
{
    ui->wgt_feedbackprogress->start();
}

void WaitFeedbackDialog::stop()
{
    ui->wgt_feedbackprogress->stop();
}

waitfeedbackdialog.ui
在这里插入图片描述