Qt之透明提示框

简述

经常使用企鹅的小伙伴一定对登录失败的提示框很熟悉，主要涉及窗口透明并添加图标、提示信息、关闭按钮的显示等。

我们可以利用QWidget创建一个提示框，然后通过样式设置我们想要的效果。

简述

效果

源码

样式

效果

源码

QMessageWidget.h

#ifndef MESSAGE_WIDGET
#define MESSAGE_WIDGET

#include <QWidget>

class QLabel;
class QPushButton;

class QMessageWidget : public QWidget
{
Q_OBJECT

public:
explicit QMessageWidget(QWidget *parent = 0);
~QMessageWidget();
// 设置显示文本
void setText(const QString &text);

protected:
void paintEvent(QPaintEvent *event);

private:
QLabel *m_pMessageLabel;
};

#endif // MESSAGE_WIDGET

QMessageWidget.cpp

#include <QLabel>
#include <QStyleOption>
#include <QPainter>
#include <QPushButton>
#include <QHBoxLayout>
#include "QMessageWidget.h"

QMessageWidget::QMessageWidget(QWidget *parent)
: QWidget(parent)
{
setFixedHeight(25);

setAutoFillBackground(true);
setObjectName("messageWidget");

// 提示图标
QLabel *pIconLabel = new QLabel(this);
m_pMessageLabel = new QLabel(this);
QPushButton *pCloseButton = new QPushButton(this);

pCloseButton->setFixedSize(8, 8);
pIconLabel->setFixedSize(16, 16);

pIconLabel->setScaledContents(true);
pIconLabel->setObjectName("informationLabel");

m_pMessageLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
m_pMessageLabel->setObjectName("highlightLabel");
m_pMessageLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

pCloseButton->setObjectName("closeTipButton");

QHBoxLayout *pLayout = new QHBoxLayout();
pLayout->addWidget(pIconLabel);
pLayout->addWidget(m_pMessageLabel);
pLayout->addWidget(pCloseButton);
pLayout->setSpacing(5);
pLayout->setContentsMargins(3, 3, 5, 3);

setLayout(pLayout);

connect(pCloseButton, SIGNAL(clicked(bool)), this, SLOT(close()));
}

QMessageWidget::~QMessageWidget()
{

}

// 设置显示文本
void QMessageWidget::setText(const QString &text)
{
m_pMessageLabel->setText(text);
}

// 设置样式需要重写
void QMessageWidget::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);

QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

样式

// 界面样式
QWidget#messageWidget {
background: rgba(255, 255, 255, 20%);
}

// 提示信息样式
QLabel#highlightLabel {
color: rgb(0, 160, 230);
}

// 图标样式
QPushButton#closeTipButton {
border-radius: none;
border-image: url(:/Images/tipClose);
background: transparent;
}
QPushButton#closeTipButton:hover {
border-image: url(:/Images/tipCloseHover);
}
QPushButton#closeTipButton:pressed {
border-image: url(:/Images/tipClosePressed);
}

这里实现了设置信息，贾娜比隐藏等效果，可以在此基础上进行扩展。背景色、字体颜色、图标等样式都可以自行设置，主要是实现思路，愿大家共勉。