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. 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 |
QPushButton/QLabel在鼠标悬浮(划过, hover)、选中(单击, pressed)状态下更换图标样式相关推荐
- 鼠标悬浮事件 -jQuery hover()方法(layer.js)(layer.tips)
鼠标悬浮事件 -jQuery hover()方法代码: <!DOCTYPE html> <html lang="en"> <head><m ...
- 鼠标悬浮事件的hover的使用
鼠标悬浮事件hover的使用 用法1: 表示当鼠标悬浮在a元素上时,a元素的背景颜色变成粉色 .a:hover{background-color: pink;} 用法2: 用a来控制其他元素 用a来控 ...
- 鼠标悬浮事件 -jQuery hover()方法
body内容 <div class="title-01"><span class="name">机构账户统计</span>& ...
- vue项目中鼠标悬浮图片实现hover效果切换图片-案例
1.使用css实现鼠标滑动切换图片效果 <ul class="ullist"><li class="img1"><img src= ...
- js动态渲染的页面发现鼠标悬浮hover事件失效
在开发上,页面是通过调用ajax调用生成的HTML元素节点,发现鼠标悬浮hover事件失效了 $(function(){$.ajax({type:'post',url:ctx+'hbk/task/al ...
- 鼠标悬浮显示图片和文字
1.引入jquery-1.11.0.min.js.配置文件config.js.业务js screen.js: 页面代码: <!DOCTYPE html> <html><h ...
- css简单实现div鼠标悬浮后出现阴影
文章目录 前言 一.效果图 二.使用步骤 1.HTML 2.CSS代码 总结 前言 css简单实现div鼠标悬浮后出现阴影 一.效果图 二.使用步骤 1.HTML 代码如下(示例): <div ...
- 鼠标悬浮选中单选按钮事件
鼠标悬浮事件 onmouseover 鼠标悬浮单选框就选中 鼠标悬浮显示注释框 鼠标悬浮单选框就选中 <el-radio-group v-model="algorithmRadio&q ...
- 【前端】html+css实现鼠标悬浮变色的按钮,消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
最新文章
- PHP退出浏览器程序执行定时任务,PHP执行定时任务
- TCP负载均衡地址转换(锐捷设备)
- 革命离成功还非常非常远,我还不怎么努力
- php 常用的知识点归集(下)
- python 3.x 不再支持MySQLdb 模块
- 神经网络中的分类器该如何改成生成器?
- leetcode944
- 【Hive】条件函数
- ORACLE设置自动递增的方法
- 项目经理的10条规则
- mdt 计算机名_配置 MDT 部署共享规则
- vs2010+silverlight4 error
- LinkLab 链接
- 输出信噪比公式_关于信噪比SNR
- 创建批处理文件.bat文件(删除指定文件夹下的文件及文件夹并循环)
- 树莓派4支持多大tf卡_树莓派入门指南(Raspberry Pi)
- latex利用bibmap生成双语对照的文献表
- PMP考试中的各种图总结
- 计算机分区的优点,NTFS分区格式的优点及其转换
- 网络安全日记之暗月DIV+CSS
热门文章
- linux防火墙为空文件夹,如何记录Linux IPTables防火墙丢弃的数据包到日志文件-linux防火墙设置...
- java equals getclass_Java equals()方法 – 子类中equals的语义如何确定getClass和instanceof的使用...
- vue仿微博评论回复_Vue之 3.0升级
- java 装饰流_java装饰流的使用【转】
- 决策树 随机森林 xgboost_从决策树到随机森林理论篇从人话到鬼话:看不懂来找我麻烦...
- pythonsuper继承规则,深入理解Python中的super()方法
- 在位置 0 处没有任何行。_我家孩子最爱这个小零食,外酥里糯,没有任何添加剂,0失败教程...
- Robust line matching through line–point invariants
- pytorch学习笔记(四):线性回归从零开始实现
- 直方图中最大的矩形(单调栈2)