用图片自定义QCheckBox样式

https://blog.csdn.net/yueashuxia/article/details/52366355

 

记录一下大致的过程，避免将来忘记。

 

实现环境：Qt Creator 3.2.1 Based on Qt5.3.2 (GCC 4.9.2, 32bit)

项目类型：Qt Widgets Application

1.首先在项目中添加Qt资源文件，命名为resource.qrc。

2.然后在资源文件中添加前缀，默认是/new/prefix1，我将它改为/CheckBox。

3.然后向/CheckBox中添加文件checked.png、uncheked.png、checkedDisabled.png。

添加文件时，选中某个项目文件夹以外路径下的图片后，会提示“无效的文件路径，文件/***/***/checked.png 没有在资源文件的子目录中，您可以选择此文件到一个有效的路径”。此时选择“复制”，将图片复制到项目文件夹下。可以在项目文件夹里面创建文件夹res，进入该文件夹后，选择“保存”。之后也是将图片保存到res文件夹下。

4.在文件管理器中打开项目文件夹下的res文件夹，新建"myStyle.qss"文件，用文本编辑器打开，填写以下内容然后保存：

 

[plain] view plain copy

1. QCheckBox{  
2.     spacing: 5px;  
3. }  
4.   
5. QCheckBox::indicator{  
6.     width: 15px;  
7.     height: 15px;  
8. }  
9.   
10. QCheckBox::indicator:unchecked{  
11.     image:url(:/CheckBox/res/unchecked.png);  
12. }  
13.   
14. QCheckBox::indicator:checked{  
15.     image:url(:/CheckBox/res/checked.png);  
16. }  
17.   
18. QCheckBox::indicator:checked:disabled{  
19.     image:url(:/CheckBox/res/checkedDisabled.png);  
20. }  

5.在/CheckBox前缀中添加myStyle.qss文件，这一次不必复制到项目文件夹下，因为它已经在项目文件夹下了。

 

6.保存资源文件resource.qrc。

7.接着在main.cpp文件中添加代码，读取qss文件并设置程序为自定义的样式：

 

[cpp] view plain copy

1. int main(int argc, char *argv[])  
2. {  
3.     QApplication a(argc, argv);  
4.   
5.     //获取并设置程序为自定义样式  
6.     QFile styleSheet(":/CheckBox/res/myStyle.qss");  
7.     styleSheet.open(QIODevice::ReadOnly);  
8.     a.setStyleSheet(styleSheet.readAll());  
9.   
10.     MainWindows w;  
11.     w.show();  
12.    
13.     return a.exec();  
14. }  

8.然后可以在程序中添加CheckBox查看效果：

 

 

9.QCheckBox可以支持自定义的效果还有很多，以下是Qt Style Sheets Examples当中关于QCheckBox样式的示例：

 

[html] view plain copy

1. QCheckBox {  
2.     spacing: 5px;  
3. }  
4.    
5. QCheckBox::indicator {  
6.     width: 13px;  
7.     height: 13px;  
8. }  
9.    
10. QCheckBox::indicator:unchecked {  
11.     image: url(:/images/checkbox_unchecked.png);  
12. }  
13.    
14. QCheckBox::indicator:unchecked:hover {  
15.     image: url(:/images/checkbox_unchecked_hover.png);  
16. }  
17.    
18. QCheckBox::indicator:unchecked:pressed {  
19.     image: url(:/images/checkbox_unchecked_pressed.png);  
20. }  
21.    
22. QCheckBox::indicator:checked {  
23.     image: url(:/images/checkbox_checked.png);  
24. }  
25.    
26. QCheckBox::indicator:checked:hover {  
27.     image: url(:/images/checkbox_checked_hover.png);  
28. }  
29.    
30. QCheckBox::indicator:checked:pressed {  
31.     image: url(:/images/checkbox_checked_pressed.png);  
32. }  
33.    
34. QCheckBox::indicator:indeterminate:hover {  
35.     image: url(:/images/checkbox_indeterminate_hover.png);  
36. }  
37.    
38. QCheckBox::indicator:indeterminate:pressed {  
39.     image: url(:/images/checkbox_indeterminate_pressed.png);  
40. }  

扩展阅读：Qt Style Sheet实践（三）：QCheckBox和QRadioButton