QPushButton/QLabel在鼠标悬浮（划过， hover）、选中（单击， pressed）状态下更换图标样式
| 环境配置 ：MinGW + QT 5.12 |
|
|
|
先上效果图：
（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 |