QCheckBox样式表qss实现状态切换显示不同图标（含第三状态：半选状态）

原创已于 2024-08-17 16:21:20 修改 · 3.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #QSS

于 2024-05-15 15:30:52 首次发布

QT 专栏收录该内容

14 篇文章

订阅专栏

QCheckBox实际上支持三种状态：选中、未选中、半选

本文介绍如何使用qss实现这三种状态的样式，设置各状态的勾选框图标

需要调用setTristate(true)函数开启第三状态，默认是只有两种状态的。

在网上百度很容易找到选中和未选中的qss样式，却很难找到半选的qss怎么写，大家都抄来抄去千篇一律，让人十分费解，经过摸索终于找到方法顺便记录一下，以后需要可以直接用。

/* QCheckBox的字体大小、颜色、勾选框与文本的间距 */
QCheckBox
{
	font-size:12px;
	color:#5be2ff;

    /* QCheckBox内部子控件的间距（其内部有三个：勾选框指示器、图标、文本）*/
    spacing:10px;
}

/* 勾选框指示器图片的尺寸 */
QCheckBox::indicator
{
	width:16px;
	height:16px;

    /* 如果QCheckBox设置了图标后，上面设置的spacing效果不理想，那么勾选框指示器的左右两边也可设置一些间距 */
    margin-left:12px;
    margin-right:12px;

}

/* QCheckBox被禁用时的文本颜色 */
QCheckBox:disabled
{
	color:#a1a1a1;
}


/* 勾选框指示器-未选中时设置的图片 */
QCheckBox::indicator:unchecked
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_normal.svg);
}

/* 勾选框指示器-未选中且被禁用时设置的图片 */
QCheckBox::indicator:unchecked:disabled
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_unselected_disabled.svg);
}


/* 勾选框指示器-未选中且鼠标盘旋时设置的图片 */
QCheckBox::indicator:hover
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_hover.svg);
}


/* 勾选框指示器-选中时设置的图片 */
QCheckBox::indicator:checked
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_selected.svg);
}

/* 勾选框指示器-选中且被禁用时设置的图片 */
QCheckBox::indicator:checked:disabled
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_selected_disabled.svg);
}


/* 勾选框指示器-半选时设置的图片 */
QCheckBox::indicator:indeterminate
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_partial-selected.svg);
}

/* 勾选框指示器-半选且被禁用时设置的图片 */
QCheckBox::indicator:indeterminate:disabled
{
	border-image:url(https://blog.csdn.net/:/new/prefix1/checkBox/check-btn_partial-selected_disabled.svg);
}