我的Qt学习之路——按钮特效

来源:互联网 发布:淘宝培训课程列表 编辑:程序博客网 时间:2024/06/05 16:53

先看一下点击效果:



我使用的是通过更改按钮的样式表来改变按钮的效果:

右键点击按钮,更改样式表,然后进行设置,输入:

QPushButton#queenMenuButton{background-color: rgba(255, 255, 255, 0);border:2px solid white;border-radius:10px;}QPushButton#queenMenuButton:hover{ background-color: rgba(255, 255, 255, 150);border:2px solid white;border-radius:10px;}QPushButton#queenMenuButton:pressed{background-color: rgba(255, 255, 255, 150);border:2px solid white;border-radius:10px;} 

首先,三种状态分别是,按钮正常状态,鼠标悬浮在按钮时的状态,按钮点击时的状态;

我举得例子中queenMenuButton是我的按钮对象的名称;

按钮正常状态下,背景颜色rgb为255,255,255即为白色,alpha通道设置为0,也就是说背景颜色会全部透过,表现为透明;第二行,边框宽度2px,颜色为白色,边角的弧度为10px;

在鼠标悬浮状态;背景颜色依旧为白色,alpha通道设置为150,此时的效果为背景铺上一层白雾,alpha设置的越高,背景透过率越低;

鼠标点击状态同鼠标悬浮状态。


还有一种按钮图标三态变换。可以通过这里设置:



还有一种鼠标点击时,按钮会有下沉效果。我暂时还没有实现,我会持续更新。

2017.11.11更新,最简单的实现方法为:

QPushButton#queenMenuButton:pressed{background-color: rgba(255, 255, 255, 150);border:2px solid white;border-radius:10px;padding-left:6px;padding-top:6px;} 
如上所示,当点击后,左间隙和顶间隙变为6px,效果为文字向下向右平移,使具有下沉效果