QPainter绘制的动态Loading

1背景介绍

widget开发中，避免不了使用类似网页的那种等待加载页面，该文档记录在Qt中基于widget开发方式中Loading页面的开发

2.基于Widget的方式制作Loading页面的三种方式

1.基于QLabel+QMovie方式，必须有Loading页的完整的gif图，需要美工合成
2.基于QPainter+Pixmap()的方式，相当于找一系列离散的Loading图，用定时器控制在合适的时候绘制其中某一张，顺序绘制出来的看起来就是一个Loading，这种方法比较简单（本文使用这种方法）
3.纯手工绘制图形和文本，再使用旋转坐标系的方式执行，一般不特殊处理这种绘制出来的效果比较差，因为整个Loading都是匀速运转的，放弃这种方法，很麻烦，又不好看

2.1 核心代码展示

本代码基于单独的Widget制作，后期如果需要使用，需要在designer中布局一个普通的QWidget对象，然后使用提升，便可以使用。

2.2头文件定义

#ifndef WIDGET_H

#define WIDGET_H
#include <QWidget>
#include <QTimer>
#include <QPainter>
#include <QPaintEvent>
#include <QPixmap>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
     Q_OBJECT
public:
     Widget(QWidget *parent = nullptr);
     ~Widget();
public:
     void startLoading(); //启动定时器并显示Loading页面
     void endLoading();  //关闭定时器并隐藏loading页面
protected:
      void paintEvent(QPaintEvent *event) override;
private:
     Ui::Widget *ui;
     QTimer *mTimer;
     QList<QPixmap> mPixmap; //保存loading图片的集合
     quint8 mIndex = 0;
};
#endif // WIDGET_H

2.3源文件定义

#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    setAttribute(Qt::WA_TranslucentBackground);
    setWindowFlag(Qt::FramelessWindowHint);
    mTimer = new QTimer(this);
    connect(mTimer,&QTimer::timeout,this,[=](){
    mIndex++;
    if(mIndex>49)
    mIndex = 0;
    update();
});
    resize(320,320);
    for(int i = 0; i < 50; i++){
    mPixmap.push_back(QPixmap(QString(":/loading/%1.png").arg(i+1)));
    }
    startLoading();
    move(1920+50,150); //为了截图方便，show在一个比较纯背景的地方
}

Widget::~Widget()
{
    delete ui;
}
void Widget::startLoading()
{
    if(!mTimer->isActive())
    mTimer->start(40);
    show();
}
void Widget::endLoading()
{
    if(mTimer->isActive())
    mTimer->stop();
    hide();
}
void Widget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    QPainter Paint(this);
    Paint.setRenderHints(QPainter::TextAntialiasing |QPainter::Antialiasing);
    Paint.drawPixmap(QRect(0,0,320,320),QPixmap(mPixmap[mIndex]));
}

2.4源文件描述

1. resize当前窗体为320*320，因为美工切的图是320px的图，因此重置窗体的大小为320px
2. for(int i = 0; i < 50; i++){mPixmap.push_back(QPixmap(QString(":/loading/%1.png").arg(i+1)));}给容器中添加切好的图，图片名为1..2...3.png，便于使用代码插入

3.效果预览

GUI_Loading.gif

小知识分享

1.设置窗体无背景，可以有两种方式，第一种setAttribute(Qt::WA_TranslucentBackground);的方式，第二种是使用样式setStyleSheet("background:transparent;")来设置，一般前者是搭配QPainter绘制，后者可以让当前窗体的父窗体的背景透出来(不使用当前窗体的背景遮盖父窗体的背景)，使用前者不加绘制，窗体会变黑窗
2.定时器的两种使用方式，第一种是实例化QTimer对象，之后startTimer(),在TimeOut中处理，第二种是直接在类内部startTime()启动定时器，返回当前启动的定时器的TimerId,记录该TimerId,在窗体析构时关闭定时器killTimer(TimerId)

有什么问题可以在线讨论，觉得有用帮忙点个赞吧！^ _ ^