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

环境配置 ：MinGW + QT 5.12

三种图标样式（从左往右分别是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文件：

class MyPushButton : public QPushButton
{
     
    Q_OBJECT
public:
    explicit MyPushButton(QWidget *parent = nullptr);
    void setUpIcon(const QIcon &icon, const QIcon &icon_hover, const QIcon &icon_pressed);

protected:
    bool event(QEvent *event) override;

private:
    QIcon Img;
    QIcon Img_hover;
    QIcon Img_pressed;
};

• MyPushButton.c文件：

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

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类：

MyPushButton *button2 = new MyPushButton(this);
button2->setFixedSize(60, 30);
button2->setFlat(true);
button2->setUpIcon(QIcon(":/listBar_Icon/add.png"), QIcon(":/listBar_Icon/add_hover.png"), QIcon(":/listBar_Icon/add_pressed.png"));
button2->setStyleSheet("QPushButton{border:0px solid rgba(0, 0, 0, 255);}");
button2->setIconSize(QSize(30, 30));
};

• 优点 ：图标显示效果不会受到按钮尺寸影响，只由setIconSize(QSize)控制。
• 缺点 ：代码比第一种方法长…

---

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

• 主窗口.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;  //事件过滤
};

• 主窗口.c文件：

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);
}

---

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

环境配置 ：MinGW + QT 5.12