QT QSS编程

[css]  view plain copy

1. QProgressBar{  
2.     color : solid gray;  
3.     border: 2px solid gray;  
4.     border-radius: 5px;  
5.     background: transparent;  
6.     padding: 0px;  
7.     text-align : center ;  
8. }  
9. QProgressBar::chunk{  
10.     background: #B22222;  
11. }  
12.   
13. QTextEdit{  
14.     border: 10px;  
15.     border-image: url(image/system/border.png)10 10 10 10 ;  
16.     background-color: rgba(43,45,31,255);  
17. }  
18.   
19. QTextEdit[description="true"]{  
20.     border: 10px;  
21.     border-image: none;  
22.     background-color: rgba(255,255,255,255);  
23. }  
24.   
25. QTextEdit QScrollBar:vertical  {  
26.      margin: 22px 0 22px 0;  
27. }  
28.   
29. QScrollBar:add-page  
30. {  
31.      background-color: rgba(0,0,0,255);  
32. }  
33.   
34. QScrollBar:sub-page  
35. {  
36.      background-color: rgba(0,0,0,255);  
37. }  
38.   
39.  QScrollBar::add-line:vertical  {  
40.   
41.      background-color: rgba(43,45,31,255);  
42.      height: 15px;  
43.      subcontrol-position: bottom;  
44.      subcontrol-origin: margin;  
45.  }  
46.   
47.  QScrollBar::sub-line:vertical  {  
48.   
49.      background-color: rgba(43,45,31,255);  
50.      height: 15px;  
51.      subcontrol-position: top;  
52.      subcontrol-origin: margin;  
53.  }  
54.   
55. QScrollBar::handle:vertical    {      
56.     border : 2px solid gray;  
57.     border-radius: 6px;  
58.     background-color: solid gray;  
59.     min-height : 12px;  
60. }  
61.   
62. QScrollBar::up-arrow:vertical  
63. {  
64.     border-image: url(image/system/button/scroll-up-arrow.png);  
65. }  
66.   
67. QScrollBar::down-arrow:vertical  
68. {  
69.     border-image: url(image/system/button/scroll-down-arrow.png);  
70. }  
71.   
72.  QLineEdit#chat_edit{  
73.     background-color: rgba(20,20,20,255);  
74.     color: white;  
75.     border: 10px transparent;  
76.     height: 20px;  
77.     border-image: url(image/system/border.png)10 10 10 10 ;  
78.  }  
79.   
80. QStatusBar::item {  
81.      border: 0px solid grey;  
82.  }  
83.    
84. QStatusBar{  
85.     background-image: url(image/system/skill-dock.png);  
86.     color:white;  
87. }  
88.   
89. QMenu[private_pile="true"]{  
90.     background-color: rgba(43,63,53,200);  
91.     border-radius: 1px;  
92.     color: white;  
93. }  
94.   
95. QPushButton[private_pile="true"]{  
96.     background-color: rgba(43,63,53,200);  
97.     border-radius: 1px;  
98.     color: white;  
99. }  
100.   
101. QPushButton[game_control="true"]{  
102.     border: 0px solid gray;  
103.     font: 12px;  
104.     border-radius: 5px;  
105.     padding: 6px 12px 6px 12px;  
106. }  
107.   
108. QPushButton#pause{  
109.     background-image: url(image/system/button/pause.png);  
110. }  
111.   
112. QPushButton#play{  
113.     background-image: url(image/system/button/play.png);  
114. }  
115.   
116. QPushButton#slow-down{  
117.     background-image: url(image/system/button/slow-down.png);  
118. }  
119.   
120. QPushButton#speed-up{  
121.     background-image: url(image/system/button/speed-up.png);  
122. }  
123.   
124. QPushButton#uniform{  
125.     background-image: url(image/system/button/uniform.png);  
126. }  
127.   
128. #skill_bar_container QPushButton{  
129.     background-image: url(image/system/button/back.png);  
130.         border: 1px solid gray;  
131.         border-radius: 4px;  
132.     color: yellow;  
133.     font: 12px;  
134.     padding: 6px 12px 6px 12px;  
135. }  
136. #skill_bar_container QPushButton:disabled{  
137.     background-image: url(image/system/button/back_shade.png);  
138.         border-radius: 4px;  
139.     color: white;  
140.     font: 12px;  
141. }  
142. #skill_bar_container QCheckBox{  
143.     border: 1px solid gray;  
144.         border-radius: 4px;  
145.     color: yellow;  
146.     font: 12px;  
147.     padding: 1px 12px 1px 8px;  
148. }  
149. #skill_bar_container QCheckBox::indicator{  
150.     height: 0px;  
151.     width: 0px;  
152. }  
153. #skill_bar_container QCheckBox:unchecked{  
154.     background-image: url(image/system/button/frequent_checkbox/unchecked.png);  
155. }  
156. #skill_bar_container QCheckBox:unchecked:hover{  
157.     background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);  
158. }  
159. #skill_bar_container QCheckBox:unchecked:pressed{  
160.     background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);  
161. }  
162. #skill_bar_container QCheckBox:checked{  
163.     background-image: url(image/system/button/frequent_checkbox/checked.png);  
164. }  
165. #skill_bar_container QCheckBox:checked:hover{  
166.     background-image: url(image/system/button/frequent_checkbox/checked_hover.png);  
167. }  
168. #skill_bar_container QCheckBox:checked:pressed{  
169.     background-image: url(image/system/button/frequent_checkbox/checked_press.png);  
170. }  
171. #skill_bar_container QComboBox{  
172.     background-image: url(image/system/button/back2.png);  
173.     border: 1px solid gray;  
174.     border-radius: 3px;  
175.     color: white;  
176.     padding: 1px 18px 1px 3px;  
177. }  
178. #skill_bar_container QComboBox:on{  
179.     padding-left: 4px;  
180.     padding-top: 3px;  
181. }  
182. #skill_bar_container QComboBox::drop-down{  
183.     border-bottom-right-radius: 3px;  
184.     border-left-color: darkgray;  
185.     border-left-style: solid;  
186.     border-left-width: 1px;  
187.     border-top-right-radius: 3px;  
188.     subcontrol-origin: padding;  
189.     subcontrol-position: top right;  
190.     width: 15px;  
191. }  
192. #skill_bar_container QComboBox::down-arrow:on{  
193.     left: 1px;  
194.     top: 1px;  
195. }  

设计Qt程序Ui的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟代码层分开，利于维护。

过程如下：

    1、建立文本文件，写入样式表内容，更改文件后缀名为qss；

    2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；

    3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

 

 

代码如下

[cpp]  view plain copy

1. QString qss;  
2.   
3.   
4.   
5.     QFile qssFile(":/qss/css.qss");  
6.   
7.     qssFile.open(QFile::ReadOnly);  
8.   
9.     if(qssFile.isOpen())  
10.   
11.     {  
12.   
13.         qss = QLatin1String(qssFile.readAll());  
14.   
15.         qApp->setStyleSheet(qss);  
16.   
17.         qssFile.close();  
18.   
19.     }