[干货]Qt利用qss样式化单选（radio button）和复选框（checkbox）

[VincentKeh]

学习了Qt有两个月了，我发现很多人对于QSS的应用不是太多，或者太重视，可能是这个东西接触不多吧，QSS对于程序的界面美化非常方便，现在分享几个QSS样式化界面的实例。
正文：
来京第一份工作做了4个月了，开始一点C++不懂，Qt一点不了解，没人带。现在C++掌握了大概，大致能比较随心的写程序了。最近做一个嵌入式软件应用，界面美化的工作交给我了。开始定计划的时候，头说了要把qss加入到界面开发中。晕，那时候连Qt是什么都不知道，何况QSS。

还好，这两个月渐渐找到感觉了，Qt掌握了基本的开发，QSS也和CSS差不多，比CSS简单多了，所以对我掌握起来没什么难度。

这个项目我把单选框（Radiobutton）和复选框（checkbox）的样式重新定义了，以前看起来就是win98那种古老的样式。想达到的效果就是现在手机app流行扁平化设计的样式。

其实实现起来非常简单，开始以为非常高大上呢，后来发现安卓开发中也是利用相同的原理实现的。单选框和复选框的几种状态都是利用单击之后切换不同的图片实现的，所以事先把你想要实现的样式图片自己做出来，或者从网上找到，然后在Qt的资源中添加保存的状态图片。

下面就是要用到的QSS样式

/*RadioButton样式设置*/
QRadioButton::indicator { 
	width: 17px;
	height: 17px;
}
/*单选框未选中样式*/
QRadioButton::indicator::unchecked {
	
	image: url(:/ico/radiobutton-unchecked-md.png);
}
/*单选框选中样式*/
QRadioButton::indicator::checked { 
	image: url(:/ico/radiobutton-checked-md.png);
}
/*RadioButton和checkbox字体和间距设置*/
QRadioButton ,QCheckBox{
	spacing: 5px;
	font-size: 15px;
}
/*checkbox样式设置*/
QCheckBox::indicator { 
	width: 26px;
	height: 50px;
}
/*未选中*/
QCheckBox::indicator::unchecked {	
	image: url(:/ico/checkbox_unchecked.png);
}
/*选中*/
QCheckBox::indicator::checked { 
	image: url(:/ico/checkbox_checked.png);
}

如果有CSS基础看以来就比较简单，其中

image: url(:/ico/radiobutton-checked-md.png);

这句就是指定，单选或多选按钮按下状态的图片路径。我在Qt的资源中添加了前缀 : ico，图片资源都放到资源前缀下了。

看一下效果吧：

挺漂亮吧，有点现代APP该有的时尚感了，右侧的button的样式也重写了，总体感觉OK。但是还有一些其他的样式个人不太会弄，比如表格表头样式不会定义，网上介绍的也很少，比较郁闷，慢慢弄吧。

现在把我使用的按钮图片素材贴到下面，用PS抠图抠出来的，抠的不太好，有用到的拿走，拿走….. 呵呵！





本文原文出自我的博客 http://www.hookr.cn/qt_qss_radiobutton.html ，希望大家多多访问交流

[草上爬]

顶，确实是干货

[Metal麦兜]

楼主，为什么我的还带着原来的那个图标？？？

[Helen_Yrh]

引用 3 楼 Helen_Yrh 的回复:

[quote=引用 1 楼 Eminor9 的回复:] 楼主，为什么我的还带着原来的那个图标？？？

遇到了一样额问题，怎么解决呢？[/quote] 咳脑残，认为indicator这个是个别名，替换了这个名字，原来这个就是那个复古的复选框，楼主厉害了。。。

[Helen_Yrh]

引用 1 楼 Eminor9 的回复:

楼主，为什么我的还带着原来的那个图标？？？

遇到了一样额问题，怎么解决呢？