Qt实现一个漂亮的等待加载界面

一、效果展示



二、实现原理
主要是通过label播放gif图片实现。加上setWindowFlags(Qt::FramelessWindowHint | Qt::Tool | Qt::WindowStaysOnTopHint);这句可以让窗口一直保持在最上层。
进度条的实现主要是通过设置label背景色来实现。
三、源码分享
waitDialog.h

#ifndef WAITDIALOG_H
#define WAITDIALOG_H

#include <QWidget>
#include <QMovie>
#include <QLabel>
#include <QDialog>
#include <QPainter>
#include <QPushButton>
#include <QGraphicsDropShadowEffect>
#include <QGridLayout>
#include <QVBoxLayout>
#include <QPainterPath>
#include <QFontMetrics>
class WaitDialog : public QDialog
{
    Q_OBJECT
Q_SIGNALS:
    void cancel_waiting_signal();
public:
    explicit WaitDialog(QWidget *parent = nullptr);
    ~WaitDialog();
    //设置提示文本
    void set_text(QString strTipsText);
    //设置是否显示取消等待按钮
    void set_btn_cancel(bool bCanCancel);
    //移动到指定窗口中间显示
    void move_to_center(QWidget* pParent);
    void set_progress(quint8 progress);
protected:
    void paintEvent(QPaintEvent *event) override;
private:
    void control_init();

private slots:
    void btn_click_slot();
private:
    QGridLayout *gridLayout;
    QVBoxLayout *verticalLayout;
    QFrame *centerFrame;
    QLabel *labelMovie;
    QMovie *movie;
    QLabel *labelText;
    QPushButton *btnCancel;

};

#endif // WAITDIALOG_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

waitDialog.cpp

#include "waitdialog.h"

WaitDialog::WaitDialog(QWidget *parent)
    : QDialog{parent}
{
    //如果需要显示任务栏对话框则删除Qt::Tool
    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool | Qt::WindowStaysOnTopHint);
    setAttribute(Qt::WA_TranslucentBackground, true);
    control_init();

}

WaitDialog::~WaitDialog()
{
    delete movie;
    delete labelMovie;
    delete labelText;
    delete btnCancel;
    delete centerFrame;
}

void WaitDialog::control_init()
{
    this->setFixedSize(250, 260);
    centerFrame = new QFrame(this);
    centerFrame->setGeometry(10, 10 ,this->width()-20, this->height()-20);


    //加载Loading动画
    labelMovie = new QLabel();
    movie = new QMovie(":/new/prefix1/image/20210311153120287.gif");

    int size = qMin(labelMovie->width(),labelMovie->height());
    movie->setScaledSize(QSize(size, size));

    labelMovie->setScaledContents(true);
    labelMovie->setMovie(movie);
    movie->start();

    //提示文本
    labelText = new QLabel();
    labelText->setAlignment(Qt::AlignCenter | Qt::AlignHCenter);
    labelText->setText("");
   // labelText->setMinimumHeight(35);
    labelText->setObjectName("labelText");
    labelText->setFont(QFont("Microsoft YaHei",10));


    //取消按钮
    btnCancel = new QPushButton();
    btnCancel->setObjectName("btnCancel");
    btnCancel->setText("取消等待");
    btnCancel->setStyleSheet("QPushButton#btnCancel{"
                             "background-color: rgba(255,127,39,130);"
                             "border-radius: 4px;"
                             "font-family: \"Microsoft YaHei\";"
                             "font-size: 14px;"
                             "color: #333333;"
                             "}"
                             "QPushButton#btnCancel::hover{"
                             "background:rgba(255,127,39, 170)"
                             "}"
                             "QPushButton#btnCancel::pressed{"
                             "background:rgba(255,127,39, 255)"
                             "}");
    btnCancel->setMinimumHeight(35);
    btnCancel->setEnabled(true);
    connect(btnCancel, &QPushButton::clicked, this, &WaitDialog::btn_click_slot);


    gridLayout = new QGridLayout();
    gridLayout->setSpacing(0);
    gridLayout->setObjectName(QString::fromUtf8("gridLayout"));
    gridLayout->setContentsMargins(2, 2, 2, 2);
    verticalLayout = new QVBoxLayout();
    verticalLayout->setSpacing(0);
    verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));


    verticalLayout->addWidget(labelMovie);
    verticalLayout->addWidget(labelText);
    verticalLayout->addWidget(btnCancel);

    verticalLayout->setStretch(0, 4);
    verticalLayout->setStretch(1, 3);
    verticalLayout->setStretch(2, 1);

    gridLayout->addLayout(verticalLayout, 0, 0, 1, 1);

    centerFrame->setLayout(gridLayout);


    //实例阴影shadow
    QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
    shadow->setOffset(0, 0);
    shadow->setColor(QColor(32, 101, 165));
    shadow->setBlurRadius(10);
    this->setGraphicsEffect(shadow);
}

void WaitDialog::set_text(QString strTipsText)
{
    labelText->setText(strTipsText);

}

void WaitDialog::set_btn_cancel(bool bCanCancel)
{
    btnCancel->setEnabled(bCanCancel);
}

void WaitDialog::move_to_center(QWidget *pParent)
{
    if(pParent != nullptr && pParent != NULL)
    {
        int nParentWidth = pParent->width();
        int nParentHeigth = pParent->height();

        int nWidth = this->width();
        int nHeight = this->height();

        int nParentX = pParent->x();
        int nParentY = pParent->y();

        int x = (nParentX + (nParentWidth - nWidth) / 2);
        int y = (nParentY + (nParentHeigth - nHeight) / 2);

        this->move(x, y);
    }
}

void WaitDialog::set_progress(quint8 progress)
{
    if(progress >100)
        progress = 100;
    float a = progress/100.0;
    if(a >=1)
        a=0.999;

    labelText->setStyleSheet(QString("background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, "
                             "stop:0 rgba(0, 168,243, 100), "
                             "stop:%1 rgba(0, 168, 243, 100),"
                             "stop:%2 rgba(255, 255, 255, 255), "
                             "stop:1 rgba(255, 255, 255, 255));").arg(a).arg(a+0.000004));
}

void WaitDialog::btn_click_slot()
{
    emit cancel_waiting_signal();
}

void WaitDialog::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing); //反锯齿
    painter.setBrush(QBrush(Qt::white));
    painter.setPen(Qt::transparent);
    QRect rect = this->rect();
    rect.setLeft(9);
    rect.setTop(9);
    rect.setWidth(rect.width() - 9);
    rect.setHeight(rect.height() - 9);
    painter.drawRoundedRect(rect, 8, 8);
    QWidget::paintEvent(event);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166