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，並做了小小改動