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(:/new/prefix1/checkBox/check-btn_normal.svg);
}
/* 勾选框指示器-未选中且被禁用时设置的图片 */
QCheckBox::indicator:unchecked:disabled
{
border-image:url(:/new/prefix1/checkBox/check-btn_unselected_disabled.svg);
}
/* 勾选框指示器-未选中且鼠标盘旋时设置的图片 */
QCheckBox::indicator:hover
{
border-image:url(:/new/prefix1/checkBox/check-btn_hover.svg);
}
/* 勾选框指示器-选中时设置的图片 */
QCheckBox::indicator:checked
{
border-image:url(:/new/prefix1/checkBox/check-btn_selected.svg);
}
/* 勾选框指示器-选中且被禁用时设置的图片 */
QCheckBox::indicator:checked:disabled
{
border-image:url(:/new/prefix1/checkBox/check-btn_selected_disabled.svg);
}
/* 勾选框指示器-半选时设置的图片 */
QCheckBox::indicator:indeterminate
{
border-image:url(:/new/prefix1/checkBox/check-btn_partial-selected.svg);
}
/* 勾选框指示器-半选且被禁用时设置的图片 */
QCheckBox::indicator:indeterminate
{
border-image:url(:/new/prefix1/checkBox/check-btn_partial-selected_disabled.svg);
}