Qt 定时消失提示框 淡入淡出提示框_qt 渐入渐出提示信息

前言

  在实际开发过程中，我们有时需要显示一些信息，这些信息会在短时间后自动消失，而不需要用户手动关闭。为了处理这种需求，我开发了一个自动消失的提示框类。这样做旨在提高开发效率，并为大家提供一个可直接使用或参考的解决方案，如果有任何改进意见，非常欢迎大家提出。

效果展示

UML 类图

实现思路

  AutoDisapperMsgBox 类继承自 QLabel，利用 QPropertyAnimation 和 QGraphicsOpacityEffect 类来实现动态的显示和消失效果。

代码展示

下面是 autodisappermsgbox.h 的代码

#ifndef AUTODISAPPERMSGBOX_H
#define AUTODISAPPERMSGBOX_H

#include <QObject>
#include <QWidget>
#include <QLabel>

class QGraphicsOpacityEffect;
class QPropertyAnimation;
class QMutex;

class AutoDisapperMsgBox : public QLabel
{
    Q_OBJECT
public:

    explicit AutoDisapperMsgBox(QWidget *parent, const QString& text = "", quint32 displayTime = 3, quint32 fadeOutTime = 3, quint32 fadeInTime = 1);

    void setDuration(quint32 secs);                                         // 设置显示时间

    void setFadeInTime(quint32 secs);                                       // 设置淡入时间

    void setFadeOutTime(quint32 secs);                                      // 设置淡出时间

    void setBackgroundColor(const QColor& color);                           // 设置背景色

    void setRadiusPixel(quint32 pixel);                                     // 设置圆角情况

    void moveToCenterOfParent();                                            // 移动至父对象中心

    void show();

    static void show(QWidget* parent, const QString& text);

private:
    void InitParam();                                                       // 初始化参数

    void InitUI();                                                          // 初始化 UI 界面

    inline QString qColorToStyleSheetRGBA(const QColor& color);             // 将 QColor 转换成 rgba() 格式

    void fadeOut();                                                         // 执行淡出操作
    void fadeIn();                                                          // 执行淡入操作

    void moveToCenterOfParent_p();                                          // 移动至父对象中心

private:
    QGraphicsOpacityEffect* m_opacity = nullptr;                            // 消息框的不透明度
    QPropertyAnimation* m_fadeInAnim = nullptr, *m_fadeOutAnim = nullptr;   // 淡入动画 和 淡出动画
    quint32 m_fadeInTime;                       // 淡入时间
    quint32 m_fadeOutTime;                      // 淡出时间
    quint32 m_displayTime;                      // 显示时间
    QString m_content;                          // 文本
    quint32 m_radiusPix;                        // 圆角值
    QString m_backgroundRGBA;                   // 背景色的RGBA值
    bool m_isAlignCenterOfParent = false;       // 是否位于父对象的中心

    static AutoDisapperMsgBox* mP_instance;     // 静态实例
    static QMutex m_mutex;                      // 锁
};

#endif // AUTODISAPPERMSGBOX_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
50
51
52
53
54
55
56
57
58
59
60
61
62
63

下面是 autodisappermsgbox.cpp 的代码

#include "autodisappermsgbox.h"

#include <QGraphicsOpacityEffect>
#include <QPropertyAnimation>
#include <QTimer>
#include <QMutex>
#include <QMutexLocker>

AutoDisapperMsgBox* AutoDisapperMsgBox::mP_instance = nullptr;
QMutex AutoDisapperMsgBox::m_mutex;

AutoDisapperMsgBox::AutoDisapperMsgBox(QWidget *parent, const QString &text, quint32 displayTime, quint32 fadeOutTime, quint32 fadeInTime):
    QLabel(parent),
    m_content(text)
{    
    InitParam();
    InitUI();

    setFadeInTime(fadeInTime);
    setFadeOutTime(fadeOutTime);
    setDuration(displayTime);
}

void AutoDisapperMsgBox::setDuration(quint32 secs)
{
    if(m_displayTime <=0){
        return;
    }
    m_displayTime = secs * 1000;
}

void AutoDisapperMsgBox::setFadeInTime(quint32 secs)
{
    m_fadeInTime = secs * 1000;

    if(m_fadeInAnim){
        m_fadeInAnim->setDuration(static_cast<int>(m_fadeInTime));
    }
}

void AutoDisapperMsgBox::setFadeOutTime(quint32 secs)
{
    m_fadeOutTime = secs * 1000;

    if(m_fadeOutAnim){
        m_fadeOutAnim->setDuration(static_cast<int>(m_fadeOutTime));
    }
}


void AutoDisapperMsgBox::setBackgroundColor(const QColor &color)
{
    m_backgroundRGBA = qColorToStyleSheetRGBA(color);
}

void AutoDisapperMsgBox::setRadiusPixel(quint32 pixel)
{
    m_radiusPix = pixel;
}


void AutoDisapperMsgBox::moveToCenterOfParent()
{
    QWidget* parent =  qobject_cast<QWidget*>(this->parent());

    if(nullptr == parent){
        return;
    }

    m_isAlignCenterOfParent = true;
}

void AutoDisapperMsgBox::show()
{
    this->setText(m_content);

    // 设置样式表
    QString styleSheet = QString("QLabel{color:white;"
                                 "background-color:%1; border-radius:%2;}").arg(m_backgroundRGBA).arg(m_radiusPix);
    this->setStyleSheet(styleSheet);

    // 如果移动至父对象中间标志已置为true，则执行下面的代码
    if(m_isAlignCenterOfParent){
        moveToCenterOfParent_p();
    }

    // 淡入
    fadeIn();

    QLabel::show();
}

void AutoDisapperMsgBox::show(QWidget *parent, const QString &text)
{
    if(nullptr == parent){
        return;
    }

    if(nullptr == mP_instance){
        // 双重检验
        QMutexLocker locker(&m_mutex);
        if(nullptr == mP_instance){
            mP_instance = new AutoDisapperMsgBox(parent, text);
        }
    }else{
        mP_instance->setParent(parent);
        mP_instance->m_content = text;
    }

    if(nullptr == mP_instance){
        return;
    }

    mP_instance->moveToCenterOfParent();

    mP_instance->show();
}


void AutoDisapperMsgBox::InitParam()
{
    m_opacity = new QGraphicsOpacityEffect(this);

    // 将 m_opacity 设置为 QLabel 的 GraphicsEffect
    this->setGraphicsEffect(m_opacity);

    m_fadeInAnim = new QPropertyAnimation(m_opacity, "opacity");
    m_fadeOutAnim = new QPropertyAnimation(m_opacity, "opacity");

    // 设置淡入淡出的属性起始值
    m_fadeInAnim->setStartValue(0);
    m_fadeInAnim->setEndValue(1);

    m_fadeOutAnim->setStartValue(1);
    m_fadeOutAnim->setEndValue(0);

}

void AutoDisapperMsgBox::InitUI()
{
    // 此处为默认样式，可被修改
    this->setMinimumSize(100,38);
    this->setAlignment(Qt::AlignCenter);
    setBackgroundColor(QColor(0, 0, 0, 150));
    setRadiusPixel(15);    
}

QString AutoDisapperMsgBox::qColorToStyleSheetRGBA(const QColor &color)
{

    return QString("rgba(%1, %2, %3, %4)")
           .arg(color.red())    // 获取红色分量
           .arg(color.green())  // 获取绿色分量
           .arg(color.blue())   // 获取蓝色分量
           .arg(color.alpha()); // 获取透明度分量

}

void AutoDisapperMsgBox::fadeOut()
{
    if(m_fadeOutAnim && m_fadeOutAnim->state() != QPropertyAnimation::Running){
        m_fadeOutAnim->start();
        connect(m_fadeOutAnim, &QPropertyAnimation::finished, this, [this](){
           this->hide();
        });
    }
}

void AutoDisapperMsgBox::fadeIn()
{
    // 如果淡入动画没有运行，则执行下面的代码
    if(m_fadeInAnim && m_fadeInAnim->state() != QPropertyAnimation::Running){
        m_fadeInAnim->start();

        connect(m_fadeInAnim, &QPropertyAnimation::finished, this, [this](){
            QTimer::singleShot(m_displayTime, [this](){
                fadeOut();
            });
        }, Qt::UniqueConnection);

    }

}

void AutoDisapperMsgBox::moveToCenterOfParent_p()
{
    QWidget* parent =  qobject_cast<QWidget*>(this->parent());

    if(nullptr == parent){
        return;
    }

    // 计算中心位置
    int x = (parent->size().width() - this->width()) / 2;
    int y = (parent->size().height() - this->height()) / 2;

    // 将按钮移动到中心
    this->move(x, y);
}

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

下面是两种使用方式

// 方式一：静态展示
	AutoDisapperMsgBox::show(this, "开机中...");

// 方式二：自定义展示
    AutoDisapperMsgBox msgBox = new AutoDisapperMsgBox(this);
    msgBox->setDuration(5);
    msgBox->setFadeInTime(2);
    msgBox->setText("关机中… ");
    msgBox->resize(300,50);
    msgBox->show();
    
1
2
3
4
5
6
7
8
9
10
11
12