Qt之透明提示框

Posted 2020-07-02 一去丶二三里

简述

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

我们可以利用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);
}

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