2024年1月4日发(作者：)

在用户等待数据加载的时候，一个好看的数据加载界面是非常重要的。刚好最近工作可能也要实现一个好看的数据加载等待界面，于是乎在互联网上阅览一番之后没找到比较好看的样子，因此决定手动实现一个。

QT提供丰富的图形绘制接口，可以绘制出非常炫酷的图形，可以说只要提供一个好看的设计图，用QT都能实现出来。

话不多说，下面把上图的实现思路介绍一下，最后 附上源码

1、 由于QT窗口默认是矩形的，而且不透明，因此为了实现圆形背景，需要先设置窗口背景为纯透明，然后再绘制这个圆形。

2、 从图中可以看出，背景圆形的颜色是从中心到边沿渐变由浅到深的，这里使用QT提供渐变类QRadialGradient可以实现。

3、 中间的固定文字和进度文字没什么可说的，关联具体的加载工作更新即可

4、 上图中最麻烦的可能就是边沿的动态旋转条了，两条旋转条其实是对称的，实现了一边就能轻易实现另一边。旋转条也是渐变的，从头到尾透明度逐渐增加，颜色也逐渐变化，这个可以通过QT提供的QConicalGradient类来实现。

5、 而旋转效果就是通过定时器定时旋转坐标系来实现，这种方式是实现旋转效果的最简单方式。

下面附上源码：

LoadingProgressDialog.h

#ifndef LOADINGPROGRESSDIALOG_H

#define LOADINGPROGRESSDIALOG_H

#include

class QTimer;

class LoadingProgressDialog : public QDialog

{

Q_OBJECT

public:

LoadingProgressDialog(QWidget *parent = 0);

~LoadingProgressDialog();

void

paintEvent(QPaintEvent* event);

void

mousePressEvent(QMouseEvent* event);

void

mouseDoubleClickEvent(QMouseEvent* event);

public slots:

void updateAngle();

void updateProgress();

private:

int percent;

QString description;

QStringList descriptionList;

int descriptionIndex;

qreal angle;//旋转角度

bool isCursor;//光标形式或者圆弧形式

QTimer * angleTimer;

QTimer * percentTimer;

QTimer * descriptionTimer;

};

#endif // LOADINGPROGRESSDIALOG_H

#include "loadingprogressdialog.h"

#include

#include

#include

#include

#include

#include

LoadingProgressDialog::LoadingProgressDialog(QWidget *parent)

: QDialog(parent)

{

setWindowFlags(Qt::FramelessWindowHint);

setAttribute(Qt::WA_TranslucentBackground);

resize(440, 440);

isCursor = false;

angle = 0.0;

percent = 0;

descriptionIndex = 0;

descriptionList<

<

<

description = (descriptionIndex);

angleTimer = new QTimer(this);

angleTimer->setInterval(30);

percentTimer = new QTimer(this);

percentTimer->setInterval(500);

descriptionTimer = new QTimer(this);

descriptionTimer->setInterval(1000);

connect(angleTimer, &QTimer::timeout, this,

&LoadingProgressDialog::updateAngle);

connect(percentTimer, &QTimer::timeout, this,

&LoadingProgressDialog::updateProgress);

connect(descriptionTimer, &QTimer::timeout, this,

&LoadingProgressDialog::updateProgress);

angleTimer->start();

percentTimer->start();

descriptionTimer->start();

}

LoadingProgressDialog::~LoadingProgressDialog()

{

}

void LoadingProgressDialog::paintEvent(QPaintEvent *event)

{

QPainter painter(this);

derHint(QPainter::Antialiasing, true);

ate(width() / 2, height() / 2);

//填充内圆，用drawEllipse出问题

QRadialGradient radialGradient(QPoint(0, 0), 200);

orAt(0.0, QColor(6, 55, 83));

orAt(1.0, QColor(1, 20, 37));

QPainterPath path;

lRule(Qt::WindingFill);

ipse(QPoint(0, 0), (this->width() - 40)/2,

(this->height() - 40)/2);

th(path, radialGradient);

//画上一级外环形

(QPen(QColor(6, 55, 83, 150), 10));

lipse(QPoint(0, 0), 205, 205);

//画这一级的环动光标

();

(angle);

//光标形式

if(isCursor)

{

QRadialGradient cursorGradient(QPoint(0, -205), 5);

orAt(0.0, QColor(120, 243, 240));

orAt(0.5, QColor(96, 196, 212));

orAt(1.0, QColor(65, 114, 129));

(Qt::NoPen);

sh(cursorGradient);

lipse(QPoint(0, -205), 5, 5);

}

else

{

//圆弧形式

QConicalGradient conicalGradient(QPointF(0, 0), 90);

orAt(0.0, QColor(199, 100, 15));

orAt(0.25, QColor(118, 116, 113));

orAt(0.5, QColor(118, 116, 113));

orAt(1.0, QColor(118, 116, 113));

QRectF rectangle(-205, -205.0, 410, 410);

int startAngle = 90*16;

int spanAngle = 90*16;

(QPen(conicalGradient, 10));

c(rectangle, startAngle, spanAngle);

//双圆弧

QConicalGradient conicalGradient2(QPointF(0, 0), 270);

orAt(0.0, QColor(199, 100, 15));

orAt(0.25, QColor(118, 116, 113));

orAt(0.5, QColor(118, 116, 113));

orAt(1.0, QColor(118, 116, 113));

QRectF rectangle2(-205, -205.0, 410, 410);

int startAngle2 = -90*16;

int spanAngle2 = 90*16;

(QPen(conicalGradient2, 10));

c(rectangle2, startAngle2, spanAngle2);

}

e();

//画上一级外环形，阴影部分

QColor color(0, 0, 0, 50);

for (int i = 0; i < 10; i++)

{

QPainterPath path;

lRule(Qt::WindingFill);

ipse(-210 - i, -210 - i, this->width() - (10 - i)

* 2, this->height() - (10 - i) * 2);

ha(150 - qSqrt(i) * 50);

(color);

th(path);

}

//画文字

(QPen(QColor(231, 147, 18), 2));

QFont font = ();

ily("Arial Black");

d(true);

lic(true);

elSize(84);

t(font);

QRect text1Rect(-220, -220 + 50, 395, 84);

xt(text1Rect, Qt::AlignCenter, "AQM");

(QPen(QColor(255, 255, 255), 5));

ily("宋体");

lic(false);

d(true);

elSize(96);

t(font);

QRect text2Rect(-220, -220 + 146, 440, 96);

xt(text2Rect, Qt::AlignCenter,

QString::number(percent) + "%");

ily("宋体");

lic(false);

d(true);

elSize(14);

t(font);

QRect text3Rect(-220, -220 + 242, 440, 14);

xt(text3Rect, Qt::AlignCenter, description);

ily("微软雅黑");

lic(false);

d(false);

elSize(60);

t(font);

QRect text4Rect(-220, -220 + 266, 440, 60);

xt(text4Rect, Qt::AlignCenter, QStringLiteral("信息发布"));

ily("微软雅黑");

lic(false);

d(false);

elSize(20);

t(font);

QRect text5Rect(-220, -220 + 340, 440, 20);

xt(text5Rect, Qt::AlignCenter, QStringLiteral("让

生 活 更 美 好"));

}

void LoadingProgressDialog::mousePressEvent(QMouseEvent *event)

{

return QDialog::mousePressEvent(event);

if(event->button() == Qt::LeftButton)

{

isCursor = !isCursor;

update();

}

}

void LoadingProgressDialog::mouseDoubleClickEvent(QMouseEvent *event)

{

#define QUIT

#ifdef QUIT

qApp->quit();

#else

// angle = 0;

// percent = 0;

// descriptionIndex=0;

// angleTimer->start();

// percentTimer->start();

// descriptionTimer->start();

#endif

}

void LoadingProgressDialog::updateAngle()

{

// if(angle < 720.0)

// {

// angle += 1.24*3;

// }

// else

// {

// angleTimer->stop();

// }

angle += 1.24*10;

if(percent >= 100)

angleTimer->stop();

update();

}

void LoadingProgressDialog::updateProgress()

{

if(sender() == percentTimer)

{

if(percent < 100)

{

percent += 10;

}

else

{

percentTimer->stop();

}

}

else if(sender() == descriptionTimer)

{

if(descriptionIndex < 4)

{

descriptionIndex++;

}

else

{

descriptionTimer->start();

}

description = (descriptionIndex);

}

update();

}

最后是

#include "loadingprogressdialog.h"

#include

int main(int argc, char *argv[])

{

QApplication a(argc, argv);

LoadingProgressDialog w;

();

return ();

}