QCheckBox的qss部分

最新推荐文章于 2024-06-10 00:21:34 发布

lpl还在学习的路上

最新推荐文章于 2024-06-10 00:21:34 发布

阅读量1k

点赞数

分类专栏： Qt 文章标签： qt

本文链接：https://blog.csdn.net/weixin_51883798/article/details/131283529

版权

Qt 专栏收录该内容

120 篇文章 2 订阅

订阅专栏

文章讲述了在Qt中使用QSS样式表来定制QCheckBox的选中与未选中状态，包括圆角边框、背景颜色和对勾图标的显示。在解决选中时的对勾晃动问题上，通过调整checked状态下的width和height来消除切换时的视觉差异。

摘要由CSDN通过智能技术生成

目标效果：

qt中如何实现这样的效果呢？

选中时：圆角边框，蓝色背景，白色对勾。checked

未选中时：圆角边框，白色背景，没有对勾。unchecked

QCheckBox::indicator对应着这个小框框

宽度和高度也需要调整。

初版：

QCheckBox::indicator:checked
{
	border-radius:5px;
	background-color: rgb(0, 161, 214);
	width: 20px;
    height: 20px;
}
QCheckBox::indicator:unchecked
{
	border-radius:5px;
	background-color: rgb(255,255,255);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(229, 231, 235);	
	width: 20px;
    height: 20px;
}

关于选中时的对勾？

border-image: url(:/images/对勾_块.png);

但这样有缺点，在切换的时候会看到一种晃动。是间距的变化。

而b站的页面却没有这种晃动。

解决方法：修改checked状态下的高和宽为24px后即可消除晃动。

思考：

可以这么理解，width和height决定的是background的高和宽，实际显示时border的部分也会显示。

完整qss内容：

QCheckBox::indicator:checked
{
	border-radius:5px;
	background-color: rgb(0, 161, 214);
	width: 24px;
    height: 24px;
	border-image: url(:/images/对勾_块.png);
}
QCheckBox::indicator:unchecked
{
	border-radius:5px;
	background-color: rgb(255,255,255);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(229, 231, 235);	
	width: 20px;
    height: 20px;
}