Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果

已于 2022-04-08 10:01:53 修改
阅读量5.9w 收藏 278
点赞数 66
CC 4.0 BY-SA版权
分类专栏： Qt之控件讲解篇 文章标签： qt 按钮 样式 自定义按钮 Button
于 2016-12-05 15:28:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GoForwardToStep/article/details/53464925
本文介绍了在Qt中自定义按钮样式，包括鼠标悬浮、按下、松开后的视觉效果。提供了设置背景图和通过CSS样式控制的两种方法，并分析了各自的优缺点。通过示例代码展示了如何实现按钮在不同状态下的样式变化。

Qt技术学习班开始了，更多精彩、好玩的内容等着你，赶紧报名吧! 群号：655815739

#一、简述

在上一篇 Qt 之 去除窗口部件被选中后的焦点虚线框 中，我们为了去除焦点虚线框，给按钮的样式加上了如下的样式。

QPushButton
{
    background:red;
    border:0px;
}

这样导致鼠标点击按钮之后没有按下凹陷的反馈感觉是没有点击上去似的。

这里写图片描述

上面两个按钮加上了border:0px;去除了边框，点击之后没有凹陷的感觉，而后两个按钮没有加上border:0px;，保留了按钮原始的点击凹陷的感觉，但是为了去除矩形虚线框，我们不得已加上了border:0px;去除了边框，保留了背景色样式。这一篇中我们将自定义按钮 在鼠标 悬浮、按下、松开后的效果。

#二、代码之路
关于自定义按钮 在鼠标 悬浮、按下、松开后的效果，一种是设置背景图，主要是需要自己设计按钮的效果图，另一种是通过样式控制不同状态下按钮的显示效果。代码很简单，效果却不一般 O(∩_∩)O哈！。

###1、设置背景图方式

了解本专栏 订阅专栏 解锁全文 超级会员免费看
QT：实现悬浮控件
AI.PLAY
07-09 4833
实现控件置顶悬浮，鼠标左键切换状态，右键拖动。 #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QMouseEvent> #include <QPoint> #include <QPixmap> #include <QDesktopServices> #include <QUrl> #include <qlabel.h> .
Qt之实现按钮正常（Normal）、滑过（Hover）、按下（Press）效果
热门推荐
深入浅出
05-24 1万+
编程不仅仅是为了解决问题而存在，更多的是
常用 QT 样式与方法（按钮悬浮变色，渐变色等）
QtCompany的博客
07-28 4280
类似于企业微信等，鼠标悬浮在某按钮上，按钮会改变背景色来达到告知用户 "选中" 的效果，如下图所示：可以看到其实是 background 有一个浅灰色，同理，我们可以在 hover 的时候改变按钮的 background 如企业微信这样的作法，或者更改按钮文字颜色。
【Qt】QSS
最新发布
2301_80224556的博客
10-07 1308
我们可以在文档里面直接点击这个盒子模型，就能跳转它的文档里面我们就来讲讲这个盒子模型在使用样式表进行界面设计时，每一个控件均可视为一个由四个同心矩形构成的容器，依次为：外边距矩形、边框矩形、内边距矩形和内容矩形。这一结构在网页与界面设计中被称为“盒子模型”（Box Model），它详细规范了控件在视觉上的空间组成方式。盒子模型的四个矩形区域从外到内依次排列，其概念结构可参考以下示意图：（此处保留原图示位置）外边距（Margin）
Qt实现自定义按钮的三态效果
weixin_34347651的博客
07-14 1277
好久之前做的一个小软件，好长时间没动过了，在不记录下有些细节可能都忘了，这里整理下部分功能的实现。 按钮的三态，指的是普通态、鼠标的停留态、点击态，三态是界面交互非常基本的一项功能，Qt中如果使用的是原始的按钮，三态的效果是有的，鼠标放上去会变色，点击的时候有凹陷的效果，工具栏中的图标也具备三态效果，但是如果自定义的图标这个效果就没有了。 下面整理下自定义按钮图标的方法，先看下我做的效果图...
Qt 之按钮鼠标 悬浮、按下、松开后的效果
m0_60529319的博客
04-22 5902
本文介绍了Qt中的按钮实现响应鼠标悬浮、按下、松开后的效果，在三种状态下，按钮改变不同的背景图片。方式1：通过修改样式表的方式去实现；方式2：通过继承QPushButton去实现一个自定义的按钮；方式3：在主界面中给按钮安装事件过滤器的方式去实现继承QPushButton类后，重写了event()方法break;break;case QEvent :: MouseButtonPress : this -> setIcon(QIcon(":/icons/images/暂停.png"));
Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果（转载）
lxj362343的博客
05-21 3062
———————————————— 版权声明：本文为优快云博主「前行中的小猪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.youkuaiyun.com/goforwardto...
Qt：悬浮按钮
炸酱面和他的博客们
04-26 3759
Qt：悬浮按钮前言效果图源码 前言 基于QPushButton实现的悬浮按钮功能，并且加入了一些动画，目前实现了基本的功能，满足可用，其他功能细节正在完善中。实现思路计算坐标然后绘制，尽可能减少贴图的使用。 效果图如下，代码自取，请放心食用。有好的想法建议欢迎留言交流，会不定期回复。 效果图 源码 懒得写描述了，自己看吧，直接拿去用也不是不行。 fr_floating_action_button.h #ifndef FR_FLOATING_ACTION_BUTTON_H #define FR_FLOATI
Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果--三种实现方式
xiyangxiaoguo的博客
12-03 8076
简介本文介绍了Qt中的按钮实现响应鼠标悬浮、按下、松开后的效果，在三种状态下，按钮改变不同的背景图片。方式1：通过设置setStyleSheet的方式去实现；方式2：通过继承QPushButton去实现一个自定义的按钮；方式3：在主界面中给按钮安装事件过滤器的方式去实现程序方式1：通过设置setStyleSheet的方式去实现； 方式2：通过继承QPushButton去实现一个自定义的按钮；继承QPushButton类后，重写了event()方法 方式3：在主界面中给按钮安装事件过滤器的方式去实现
QT制作类似360悬浮球，实现各种基本功能
05-17
8. **布局与样式**：为了使悬浮球具有良好的视觉效果，可以使用`QGraphicsView`和`QGraphicsScene`来创建自定义的图形元素，并使用`QSS`（QT样式表）来定制界面样式，包括颜色、字体、边框等。 9. **代码组织**：一...
qt pushbutton鼠标悬浮事件
09-19
主要用到按钮的三种状态：正常状态（或鼠标松开按钮的状态）、鼠标悬浮在按钮上的状态、鼠标按下按钮时的状态。只需在不同状态下的大括号中填写不同的样式，对按钮进行操作时就会显示不同的样式效果。示例代码如下：...
凹凸效果按钮
05-05
实现具有切换开关的按钮 ，有凹凸效果的按钮，在vs2005测试通过。效果很好
Qt自定义控件动画效果按钮
03-25
Qt自定义控件动画效果按钮
QT，点击按钮，动态图片滑动效果
10-18
由于需要，临时写的一个简单的点击按钮，图片动态滑动效果。本人开发环境是VS2013+qt5.6，用其他版本的VS和Qt重新编译就行
Qt--按钮点击
m0_65993150的博客
01-11 1767
Qt按钮点击具有弹跳效果
Qt：给自己的程序加上炫酷的鼠标双击特效
终曲
03-25 1万+
你有没有想过给自己的程序添加一个炫酷的点击效果， 先上效果图： 有没有心动的感觉？ 其实这个效果实现起来非常简单。 首先重写mouseDoubleClickEvent事件，为什么就不用多说了，看名字都知道，鼠标双击事件。 接下来使用event->button()来判断是否是鼠标左键双击。 最后就是动画显示 动画显示使用QMovie加载gif图片，值得一说的是，你所选取的gif图片最...
Qt中按钮图标的设置、按钮按下时浮动效果设置 以及 QT的EXE程序图标设置
thequitesunshine007的博客
12-24 5684
本文内容皆为Qt 5.13版本。 开发环境QTCreator ,若是 VS+QT插件环境则可能有略微差异。 1 Qt中按钮图标的设置 QIcon myicon1; myicon1.addFile(tr(":/image/Resource/new.png")); ui->new_btn->setIcon(myicon1); ui->new_btn->setIconSize(ui->new_btn->size()); //ui.btn_calib->setI
QT QSS setStyleSheet 利用宏快速设置按钮的三态点击效果
学习是一种信仰。
11-18 5143
一个按钮的三态效果，字符串实在是太长了，很影响码容。 于是写了一个宏去简化代码，让代码看起来整洁了许多，分享给大家。有可以改进的地方，不吝赐教。
Qt悬浮窗
天天爱学习
12-29 6674
想做类似gnucash中的悬浮效果 费劲周折，尝试了QDockWidget的setFloting()，也尝试了QMdiArea，效果都不理想。 搜到一个方法比较管用，发个链接备忘 paip.提升用户体验---c++ qt 悬浮窗实现 主要代码如下 setWindowFlags(Qt::Tool | Qt::FramelessWindowHint | Qt::WindowS
qt实现点击按钮发送数据的槽函数代码
07-17
下面是一个示例代码，演示了如何在Qt中实现点击按钮发送数据的槽函数： ```cpp #include <QtWidgets> class MyWidget : public QWidget { public: MyWidget(QWidget *parent = nullptr) : QWidget(parent) { // 创建按钮和文本框 QPushButton *button = new QPushButton("发送"); QLineEdit *lineEdit = new QLineEdit; // 创建布局 QVBoxLayout *layout = new QVBoxLayout; layout->addWidget(button); layout->addWidget(lineEdit); // 设置窗口布局 setLayout(layout); // 连接按钮的点击信号与槽函数 connect(button, &QPushButton::clicked, this, [=]() { QString text = lineEdit->text(); // 在这里可以处理发送数据的逻辑，比如将数据发送给服务器 // 这里只是简单地将数据打印输出 qDebug() << "发送数据：" << text; }); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MyWidget widget; widget.show(); return app.exec(); } ``` 在这个示例中，我们创建了一个`MyWidget`类，继承自`QWidget`。在构造函数中，我们创建了一个按钮和一个文本框，并将它们添加到垂直布局中。然后，我们将按钮的`clicked`信号连接到一个匿名的lambda函数，该函数会在按钮被点击时执行。在lambda函数中，我们获取文本框中的数据，并进行相应的处理（这里只是简单地将数据打印输出）。 最后，在`main`函数中，我们创建了一个`QApplication`对象，并显示了`MyWidget`窗口。当按钮被点击时，槽函数会被触发，处理发送数据的逻辑。你可以根据实际需求扩展这个示例代码。
评论 19
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值