QPushButton/QLabel在鼠标悬浮（划过， hover）、选中（单击， pressed）状态下更换图标样式

三种图标样式（从左往右分别是normal，hover，pressed）:

 先上效果图：

 （1）第一种方法：在样式表中设置border-image（在网上看到有人使用background-image的，不推荐，因为那样的话图标大小是不会自动缩放的，有兴趣的可以试一下）。

QPushButton *button1 = new QPushButton(this);
button1->setFixedSize(30, 30);
button1->setFlat(true);
button1->setStyleSheet("QPushButton{border-image:url(:/listBar_Icon/add.png);}"
                       "QPushButton:hover{border-image:url(:/listBar_Icon/add_hover.png);}"
                       "QPushButton:pressed{border-image:url(:/listBar_Icon/add_pressed.png);}"
                       );

• 优点 ：简单方便。

• 缺点 : border-image会随着QPushButton的大小尺寸变化（图标会填充整个按钮）。上面的例子中按钮形状和图标素材都是正方形的，所以效果不错。如果QPushButton只显示图标的话用这种方法比较好，如果需要添加文字而导致按钮形状和素材不同，这种方法则不可取。比如倘若把按钮尺寸由(30,30)改成(60,30)就会变成下面这样：
  

   （2）第二种方法：继承QPushButton，重写event事件。效果和第一个gif相同。

• mypushbutton.h
  
  

#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QWidget>
#include<QPushButton>

class MyPushButton : public QPushButton
{
    Q_OBJECT

    public:
    MyPushButton(QWidget *parent = nullptr);
    void setUpIcon(const QIcon &icon, const QIcon &icon_hover, const QIcon &icon_pressed);
    ~MyPushButton();
    protected:
    bool event(QEvent *event) override;
    private:
    QIcon Img;
    QIcon Img_hover;
    QIcon Img_pressed;

};

#endif // MYPUSHBUTTON_H

• mypushbutton.cpp

#include "mypushbutton.h"
#include<QEvent>

MyPushButton::MyPushButton(QWidget *parent)
    : QPushButton(parent)
{

}

MyPushButton::~MyPushButton()
{

}
void MyPushButton::setUpIcon(const QIcon &icon, const QIcon &icon_hover, const QIcon &icon_pressed)
{
    Img = icon;
    Img_hover = icon_hover;
    Img_pressed = icon_pressed;
    setIcon(Img);
}
bool MyPushButton::event(QEvent *event)
{
    switch (event->type())
    {
    case QEvent::Enter:
        setIcon(Img_hover);
        break;
        case QEvent::Leave:
        setIcon(Img);
        break;
        case QEvent::MouseButtonPress:
        setIcon(Img_pressed);
        break;
        case QEvent::MouseButtonRelease:
        setIcon(Img_hover);
        break;
        default:
        break;
    }
     return QPushButton::event(event);
}

• 使用MyPushButton类：

见最后

第三种方法：原理及优缺点和第二种方法相同，只是不需要继承QPushButton，而是重写主窗口的事件过滤器。

• mybutton2.h

class test : public QWidget
{
    Q_OBJECT
public:
    explicit test(QWidget *parent = nullptr);

private:
    QPushButton *button3 = nullptr;
    void initUi();

protected:
    bool eventFilter(QObject *obj, QEvent *event) override;  //事件过滤
};

• mybutton2.cpp

test::test(QWidget *parent) : QWidget(parent)
{
    initUi();
}

void test::initUi()
{
    button3 = new QPushButton(this);
    button3->setFixedSize(30, 30);
    button3->setFlat(true);
    button3->setIcon(QIcon(":/listBar_Icon/add.png"));
    button3->setStyleSheet("QPushButton{border:0px solid rgba(0, 0, 0, 255);}");
    button3->setIconSize(QSize(30, 30));
    button3->installEventFilter(this);  //安装事件过滤器
}

bool test::eventFilter(QObject *obj, QEvent *event)
{
    switch (event->type()) {
    case QEvent::HoverEnter:
        if(obj == button3)
            button3->setIcon(QIcon(":/listBar_Icon/add_hover.png"));
        break;
    case QEvent::HoverLeave:
        if(obj == button3)
            button3->setIcon(QIcon(":/listBar_Icon/add.png"));
        break;
    case QEvent::MouseButtonPress:
        if(obj == button3)
            button3->setIcon(QIcon(":/listBar_Icon/add_pressed.png"));
        break;
    case QEvent::MouseButtonRelease:
        if(obj == button3)
            button3->setIcon(QIcon(":/listBar_Icon/add_hover.png"));
        break;
    default:
        break;
    }
    return QWidget::eventFilter(obj, event);
}

• 第二种和第三种方法的使用：

#include "mypushbutton.h"
#include"mybutton2.h"
#include <QApplication>
#include <QWidget>
#include  <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);


    MyPushButton *button2 = new MyPushButton();
    button2->setWindowFlag(Qt::FramelessWindowHint);
    button2->setAttribute(Qt::WA_TranslucentBackground);
    button2->setFixedSize(60, 30);
    button2->setFlat(true);
    button2->setUpIcon(QIcon(":/listBar_Icon/normal.jpg"), QIcon(":/listBar_Icon/pressed.jpg"), QIcon(":/listBar_Icon/released.jpg"));
    button2->setStyleSheet("QPushButton{border:0px solid rgba(0, 0, 0, 255);}");
    button2->setIconSize(QSize(60, 30));
    QObject::connect(button2,MyPushButton::clicked,
        []()
    {
    qDebug()<<"AAA";
    });

    button2->show();

    MyButton2 *button3=new MyButton2();
    button3->setWindowFlag(Qt::FramelessWindowHint);
    button3->setAttribute(Qt::WA_TranslucentBackground);
    button3->setFixedSize(60, 30);
    button3->setStyleSheet("QPushButton{border:0px solid rgba(0, 0, 0, 255);}");
    QObject::connect(button3,MyButton2::destroyed,
        []()
    {
    qDebug()<<"BBB";
    });
    button3->show();

    return a.exec();
}

果需要在按钮中添加文字，那么只能使用后面两种方法。 QLabel和QPushButton差不多，不再多说。

本文转载自博主：https://blog.csdn.net/weixin_43742643/article/details/100176681，并做了小小改动