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,并做了小小改动

原文地址:https://www.cnblogs.com/sggggr/p/12673026.html