qt-qss之按键样式

最新推荐文章于 2024-09-11 22:07:56 发布
最新推荐文章于 2024-09-11 22:07:56 发布
阅读量2.6k 收藏 17
点赞数 1
分类专栏： # qt Qss 文章标签： qt qt qss按键风格 qt按键风格 qt按键qss选中 qt按键中非选中样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37603131/article/details/128439259
版权

一、前言

        本篇文章没有什么技术和精华，仅作为记录一下按键的qss配置风格，目前用了3种风格，后续有更好看的也会更新在本博客中 

二、环境

qt5.7

windows

三、正文

按键qss风格配置了按键常规样式、失能样式、可选情况下的未选择样式、鼠标悬停honver样式、鼠标按下未抬起样式

风格1：

可选择按键：

 qss:

QPushButton:checked{
color: #ffffff; 
background-color: rgb(55, 156, 212);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:checked:hover{
color: #ffffff; 
background-color: rgb(43, 124, 168);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radiu:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:checked:pressed{
color: #ffffff; 
	background-color: rgb(32, 94, 127);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked{
color: #ffffff; 
background:#A0A6A9; 
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked:hover{
color: #ffffff; 
background-color: rgb(140, 140, 140);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked:pressed{
color: #ffffff; 
background-color: rgb(100, 100, 100);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

QPushButton:!enabled{
color: #ffffff; 
background-color: rgb(200, 200, 200);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

不可选择按键：

 qss：

QPushButton:enabled{
color: #ffffff; 
background-color: rgb(55, 156, 212);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:hover{
color: #ffffff; 
background-color: rgb(43, 124, 168);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radiu:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:pressed{
color: #ffffff; 
background-color: rgb(32, 94, 127);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!enabled{
color: #ffffff; 
background-color: rgb(200, 200, 200);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

风格2：

 不可选择按键

qss：

QPushButton:enabled{
color: #ffffff; 
background-color: rgb(110, 110, 110);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:hover{
color: #ffffff; 
background-color: rgb(100, 100, 100);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radiu:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:pressed{
color: #ffffff; 
background-color: rgb(60, 60, 60);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!enabled{
color: #ffffff; 
background-color: rgb(200, 200, 200);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

风格3：

不可选择按键

 qss：

QPushButton:enabled{
color: #ffffff; 
background-color: rgb(110, 170, 100);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:hover{
color: #ffffff; 
background-color: rgb(96, 148, 87);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radiu:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:enabled:pressed{
color: #ffffff; 
	background-color: rgb(69, 106, 62);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!enabled{
color: #ffffff; 
background-color: rgb(200, 200, 200);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

可选择按键：

 qss：
 

QPushButton:checked{
color: #ffffff; 
background-color: rgb(110, 170, 100);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:checked:hover{
color: #ffffff; 
background-color: rgb(96, 148, 87);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radiu:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:checked:pressed{
color: #ffffff; 
background-color: rgb(69, 106, 62);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked{
color: #ffffff; 
background:#A0A6A9; 
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked:hover{
color: #ffffff; 
background-color: rgb(140, 140, 140);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
QPushButton:!checked:pressed{
color: #ffffff; 
background-color: rgb(100, 100, 100);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

QPushButton:!enabled{
color: #ffffff; 
background-color: rgb(200, 200, 200);
border-right:0px solid #aaaaaa; 
border-bottom:0px solid #aaaaaa;
border-left:0px solid #aaaaaa;
border-top:0px solid #aaaaaa; 
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

四、结语

积少成多

大桶矿泉水
关注
专栏目录
Qt按钮qss样式总结
琅嬛福地
06-18 5584
Qt的界面可以通过qss语法优化，相对于MFC方便了很多，不用继承，重写按钮类的相关类和方法，用类似css样式表的语句即可进行美化，UI和主程序无关，例如下面是一个优化后的按： 设置了倒角，边框，背景，鼠标停留，按下的效果，qss...
qss设置平面按钮_QSS基础-设置控件样式
weixin_42471893的博客
01-30 452
1、QSS基础-设置同类控件样式'''QSS基础：Qt Style SheetQt样式表用于设置控件的样式和风格(比如控件的背景色，字体颜色，字体大小等)和CSS的功能比较相似，功能相似'''from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWidgets import *import sysclass BasicQS...
QT-按钮风格实时渲染+QSS实时显示+QPushButton样式
07-21
通过选择不同参数，实时渲染按钮的样式，并且实时生成QSS代码，直接使用即可达到想要的效果，很方便。
Qt之QSS（样式表语法）
weixin_30444105的博客
06-16 3823
简述 Qt样式表（以下统称QSS）的术语和语法规则几乎和CSS相同。如果你熟悉CSS，可以快速浏览以下内容。 简述 样式规则 选择器类型 子控件 伪选择器 解决冲突 级联效应 继承性 Namespaces中的部件 设置对象属性 更多参考 样式规则 QSS包含了一个样式规则序列，一个样式规则由一个选择器和声明组成，选择器指定哪些部件由规则影响，声明指定哪些...
Qt开发 | qss介绍 | 常用样式 | 控件样式应用 | qss选择器
zwcslj的博客
07-03 1420
Qt Style Sheets ，简写是QSS，Qt样式表，用于修改控件外观，美化界面。它类似于前端的CSS（Cascading Style Sheets）但专门用于Qt应用程序。QSS允许开发者通过样式表来控制窗口部件的外观和感觉，而无需修改应用程序的源代码。例如：下面QLabel的样式设置QLabel/*背景色*//*字体颜色，前景色*//*字体类型*//*字体大小*//*我是qss注释*/除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。
QSS按钮样式
方池安夏的博客
07-31 3344
1.2 Qt样式表语法 （1）样式规则 每个样式规则由选择器和声明组成。 选择器：指定受该规则影响的部件。 声明：指定这个部件上要设置的属性 如：QPushButton{color:red} QPushButton是选择器； {color:red}是声明； color是属性； red是值。 （2）选择器类型 （3）子部件 对于一些复杂的部件修改样式，可能需要访问它们的子部件，如QComboBox的下拉按钮，QSpinBox的向上、向下箭头灯。 如： 下拉按钮设置图片属性： QComboBox::
qt按钮样式
weixin_42887343的博客
03-01 1万+
qt种按钮样式设置，显示效果如上图所示。 qss代码： /**正常情况下样式**/ QPushButton{ font: 10pt "微软雅黑"; color: #2f3640; background-color: #f5f6fa; border-color: #2f3640; border-radius: 15px; border-style: solid; border-width: 2px; padding: 5px; } /**鼠标停留在.
Qt 按钮样式
weixin_38516302的博客
08-13 5548
样式类型 一个按钮可以通过添加相应的样式即（btn -> setStyleSheet）实现按钮的美化。 而按钮的样式可分为如下所示： "background-color:rgba(100,225,100,30); 背景色，rgba分别为红绿蓝色以及透明度 “QPushButton{” “background-color:rgba(100,225,100,30);”//背景色（也可以设置图片） “border-style:outset;” //边框样式（inset/
Qt-QSS
ttangdi00的博客
03-28 543
1.Qt样式表的介绍 QSS的主要功能是使得界面的表现和界面元素分离，为实现设计界面皮肤和界面的控件的分离技术提供支持。 主要通过使用AQplication的setStyleSheet()设置整个应用程序的样式，还可以通过QWidget的etStyleSheet()来设置某个具体控件的样式。 2.CSS规则 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是...
qt-使用qt开发的虚拟键盘-项目源码.zip
01-24
5. **自定义样式和动画**：Qt的样式表（QSS）允许我们为控件定义自定义样式，如颜色、字体、边框等。此外，还可以使用QPropertyAnimation或QParallelAnimationGroup来添加按键按下、弹起等动画效果，提升用户体验。 ...
QT-按钮风格+QPushButton样式
12-02
通过选择不同参数，实时渲染按钮的样式，并且实时生成QSS代码，直接使用即可达到想要的效果，很方便。。
QT qss按钮三种状态（常态，鼠标覆盖，单击）
06-07
右键单击按钮，选择转到样式表，将附件的qss代码粘贴到按钮样式表中，图片从资源文件中选。
Qt 自定义QPushButton样式表(实时生成QSS)
11-20
源码可直接编译运行，自定义QPushButton样式，通过选择背景渐变、边框、字体、字号、鼠标移入移出切换、点击态、圆角设置等自动生成样式code，然后调用setStyleSheet()。
QSS 不同风格的按钮
热爱代码
06-24 928
现有风格按钮 渐变色按钮，鼠标悬停和按下都会更改颜色。 渐变色按钮，用QGraphicsDropShadowEffect实现阴影辉光效果。 待更新
QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）
m0_67254672的博客
04-30 1万+
background-image:设置背景图片（根据图片大小） border-image:设置背景图片（根据控件大小） background-color:设置背景颜色 border-color:设置边框颜色 color:设置字体颜色 border:设置边框 例:border:1px solid red; border-radius:设置边框圆角 /*左上 右上 右下 左下*/ border-top-left-radius:设置单个圆角 font：设置字体 text-align: 设置
Qt--样式表设置按钮样式
热门推荐
sinan1995的博客
04-25 4万+
按钮样式表设置： 通过样式表来设置按钮的样子，包含正常显示状态，按下状态，悬停状态，这是设置当前窗口下全局的按钮，可以根据自己的需要进行修改。   setStyleSheet( //正常状态样式 "QPushButton{" "background-color:rgba(1...
QSS --- 360主按钮样式
BIG_C_GOD的博客
10-28 1158
通过css让这样一张图片显示在按钮上，看起来很简单，但在Qt中background-position只有top bottom left right center五个关键字，所以为了搞定这点还是花了不少时间的。 QPushButton { border: 0px; border-radius: 37px; background-image: url(':/file/carL
qt按钮样式推荐
weixin_42887343的博客
10-11 621
#buttonStart{ image-position:left; image: url(:/Resources/Images/auto_normal.png); padding-left:9; } #buttonStart:disabled{ image: url(:/Resources/Images/auto_unvisable.png); } #buttonStart:hover{ image: url(:/Resources/Images/auto_hover.png); } #bu
比较stl库的ostringstream与Qt的QString::arg(),QString::number()
最新发布
liji_digital的博客
09-11 398
对于stringstream,使用比较繁琐，要联合使用std::fixed和std::setprecision才能实现固定小数位数显示，qstring则要简单一些。注意，使用qstring的时候，不论使用arg还是number，format输入参数都必须是'f'，不能用'g'，否则可能无法获得理想的效果。考虑STL库的ostringstream或者Qt的QString::arg(), number。显示一个float或者double类型的数，要求小数点后的数字位数为定值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大桶矿泉水

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值