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

2024-07-10 05:25| 来源: 网络整理| 查看: 265

环境配置：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. event()

第二种方法：继承 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, Img_hover, 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. evenfilter()

第三种方法：原理及优缺点和第二种方法相同，只是不需要继承 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

【本文地址】

公司简介

联系我们