QT-QcheckBox的美化

 主要参考Qt Style Sheets Exampleshttp://doc.qt.io/qt-5.6/stylesheet-examples.html#customizing-qcheckbox

qt中QcheckBox控件介绍：

QCheckBox继承自QAbstractButton，它提供了一个带文本标签的复选框。

对于这个控件我们可以这样理解，它由两部分组成：文本标签、勾选框。

QCheckBox（复选框）和QRadioButton（单选框）都是选项按钮。这是因为它们都可以在开（选中）或者关（未选中）之间切换。区别是对用户选择的限制：单选框定义了“多选一”的选择，而复选框提供的是“多选多”的选择。

样式表：

以下的样式表是我常用到的，提供给大家参考。

QCheckBox { 
    border: 0px solid #FFFFFF; /*设置qcheckbox控件的边框为0px（无边框）*/
    border-radius: 20px; 
    padding: 4px; 
    spacing: 10px; 
} 
/*设置qcheckbox控件中的勾选框的属性*/
 QCheckBox::indicator{
border: 0px solid #FFFFFF;  /*设置qcheckbox控件中勾选框的边框为0px（无边框）*/
width: 25px;/*勾选框的大小*/
height: 25px;
}
/*勾选框未选中时的图像*/
QCheckBox::indicator:unchecked {
    image: url(:/images/checkbox_unchecked.png);
}
/*勾选框选中时的图像*/
QCheckBox::indicator:checked {
    image: url(:/images/checkbox_checked.png);
}

---

效果图：

要想实现上图的的效果，还需再找到两个图标：复选框未选中图标、复选框选中图标。

 

我建议大家在iconfont上寻找图标，不但免费而且图标质量高，种类多。https://www.iconfont.cn/https://www.iconfont.cn/

支持的属性看Supported HTML Subset