QT 按钮上的数字气泡

效果如图所示

原理如下：

继承QPushButton类，然后重绘按钮，

注意着色面积与原面积的大小关系，还有小圆圈位置。

哦啦，恭喜你，你也会了！

 

源码如下：

//BubblelTipButton.h

class BubblelTipButton :  public QPushButton
{
public:
    BubblelTipButton(QWidget *parent);
    virtual ~BubblelTipButton(void);

    virtual void paintEvent(QPaintEvent * event);
};

//BubblelTipButton.cpp

BubblelTipButton::BubblelTipButton(QWidget *parent)
    : QPushButton(parent)
{
}

BubblelTipButton::~BubblelTipButton(void)
{
}
#define LABEL_WIDTH 20
#define BORDER_WIDTH 5
void BubblelTipButton::paintEvent(QPaintEvent * event)
{
    QPainter painter(this);
    QRect rt = rect();
    QRect rt1 = QRect(rt.right()-LABEL_WIDTH, rt.top(), LABEL_WIDTH, LABEL_WIDTH);
    QRect rt2 = QRect(rt.left()+BORDER_WIDTH, rt.top()+BORDER_WIDTH,
        rt.width()-2*BORDER_WIDTH, rt.height()-2*BORDER_WIDTH);
    painter.fillRect(rt2, Qt::green);
   
    painter.setPen(Qt::red);
    painter.setBrush(QBrush(Qt::red));
    painter.drawEllipse(rt1);

    painter.setPen(Qt::blue);
    painter.drawText(rt1, Qt::AlignCenter, "99");
    painter.drawText(rt, Qt::AlignCenter, text());
}

///

有童鞋竟然问我怎么用

1、用qt设计师把按钮拖到QWidget中，然后把QPushButton提升成BubblelTipButton，即可。

 

2、用下面的代码

//main.cpp

#include <QtWidgets/QApplication>

#include "BubblelTipButton.h"

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

   QWidget w;
    w.setFixedSize(600, 400);
    BubblelTipButton  * pBtn = new BubblelTipButton(&w);
    pBtn->setFixedSize(100, 50);
    pBtn->setText(QStringLiteral("渡渡"));
    w.show();
    return a.exec();

}