Qt浅谈之二十二Qt样式表

一、简介

      不断总结好的样式表，美化自己的界面（在实际工作中会不断的更新）。

二、详解

1、加载样式表文件

[html] view plaincopy

1. QFile file(":/qss/stylesheet.qss");  
2. file.open(QFile::ReadOnly);  
3. QString styleSheet = QLatin1String(file.readAll());  
4. qApp->setStyleSheet(styleSheet);  
5. file.close();  

       动态添加样式表，样式表加入到资源文件中。

2、QListWidget样式

[html] view plaincopy

1. {  
2.     QListWidget *contentsWidget = new QListWidget(this);  
3.     contentsWidget->setStyleSheet("QListWidget{background:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}"  
4.                                   "QListWidget::item{width:94px;height:35px;border:0px solid gray;padding-left:8px;}"  
5.                                   "QListWidget::item:!selected{}"  
6.                                   "QListWidget::item:selected:active{background:#FFFFFF;color:#19649F;border-width:-1;}"  
7.                                   "QListWidget::item:selected{background:#FFFFFF;color:#19649F;}"  
8.                                   );  
9.     contentsWidget->setFocusPolicy(Qt::NoFocus);  
10.     contentsWidget->resize(156, 180);  
11.     contentsWidget->addItem(tr("abc"));  
12.     contentsWidget->addItem(tr("123"));  
13.     contentsWidget->addItem(tr("456"));  
14.     contentsWidget->move(4, 33);  
15. }  

[html] view plaincopy

1. {  
2.     QListWidget *contentsWidget = new QListWidget(this);  
3.     contentsWidget->setStyleSheet("QListWidget{background-color:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}"  
4.                                   "QListWidget::item{width:94px;height:35px;border:0px solid gray;background-color:transparent;padding:-1px;color:#000000}"  
5.                                   "QListView::item:!enabled{background-image:url(:/handleMenu_clusters_error.png);background:#ceaf01;color:#FF0000}"  
6.                                   "QListWidget::item:hover{background-image:url(:/handleMenu_lixt_bg_hover);color:#FFFFFF;border-width:0;}"  
7.                                   "QListWidget::item:selected{background-image:url(:/handleMenu_lixt_bg_selected.png);}"  
8.                                           );  
9.     contentsWidget->setMouseTracking(true);  
10.     contentsWidget->setAutoFillBackground(true);  
11.     //contentsWidget->setFocusPolicy(Qt::NoFocus);  
12.     contentsWidget->resize(156, 180);  
13.     QListWidgetItem *newItem = new QListWidgetItem(QIcon(":/handleMenu_clusters.png"), "abc");  
14.   
15.     contentsWidget->addItem(newItem);  
16.     contentsWidget->addItem(tr("123"));  
17.     contentsWidget->addItem(tr("456"));  
18.     contentsWidget->addItem(tr("789"));  
19.     contentsWidget->setCurrentRow(1);  
20.     contentsWidget->move(4, 33);  
21.     contentsWidget->show();  
22.     contentsWidget->item(0)->setFlags(Qt::NoItemFlags);  
23. }  

       第一行是disable状态，第三行是选中状态，还有是hover状态。但disable时，图片被自动处理，不能显示为其他颜色图片，还需研究。也可以加上单选框：

[html] view plaincopy

1. contentsWidget->item(0)->setFlags(Qt::ItemIsEnabled|Qt::ItemIsUserCheckable);  
2. contentsWidget->item(0)->setCheckState(Qt::Unchecked);  

3、QComboBox

[html] view plaincopy

1. {  
2.     QComboBox *combox = new QComboBox(this);  
3.     //combox->setStyle(new QWindowsStyle);  
4.     combox->setGeometry(100, 100, 96, 26);  
5.     combox->addItem(tr("abc"));  
6.     combox->setStyleSheet("QComboBox{border:1px solid #d7d7d7; border-radius: 3px; padding: 1px 18px 1px 3px;} "  
7.                           "QComboBox:editable{ background: white; }"  
8.                           "QComboBox:!editable{ background: #fbfbfb; color:#666666}"  
9.                           "QComboBox::drop-down{ subcontrol-origin: padding; subcontrol-position: top right; width: 22px; border-left-width: 1px; border-left-color: #c9c9c9; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; }"  
10.                           "QComboBox::down-arrow { image: url(:/down.png); }"  
11.                           "QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px;}"  
12.                           "QComboBox QAbstractItemView::item{max-width: 30px;min-height: 20px}");  
13.     QListView *listView = new QListView;  
14.     listView->setStyleSheet("QListView{font-size: 11px}"  
15.                             "QListView::item:!selected{color: #19649f}"  
16.                             "QListView::item:selected:active{background-color: #1275c3}"  
17.                             "QListView::item:selected{color: white}");  
18.     combox->setView(listView);  
19. }  

       在linux加上combox->setStyle(new QWindowsStyle);可以保证下拉列表的位置在正下方。

4、QProgressBar

[html] view plaincopy

1. {  
2.     QProgressBar *process = new QProgressBar(this);  
3.     process->setValue(30);  
4.     //process->setAlignment(Qt::AlignCenter);  
5.     //process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;}"  
6.     //                       "QProgressBar::chunk{background-color: #05B8CC;width: 20px;}");  
7.     process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;text-align: center;}"  
8.                            "QProgressBar::chunk{background-color: #CD96CD;width: 10px;margin: 0.5px;}");  
9.     process->setGeometry(100, 100, 150, 23);  
10. }  

5、QLineEdit

[html] view plaincopy

1. {  
2.     QLineEdit *lineEdit = new QLineEdit(this);  
3.     lineEdit->setStyleSheet("border: 1px solid gray;border-radius:5px; background:rgba(255,255,255,0); padding: 0px 10px 0px 20px;"  
4.                             "background:yellow;selection-background-color: darkgray;");  
5.     lineEdit->setGeometry(100, 100, 120, 28);  
6. }  

5、QLineEdit

[html] view plaincopy

1. {  
2.    QSlider *slier = new QSlider(Qt::Horizontal,this);  
3.     slier->setGeometry(10, 350, 300 , 10);  
4.     slier->setStyleSheet("QSlider::groove:horizontal{border:0px;height:4px;}"  
5.                          "QSlider::sub-page:horizontal{background:white;}"  
6.                          "QSlider::add-page:horizontal{background:lightgray;}"  
7.                          "QSlider::handle:horizontal{background:white;width:10px;border-radius:5px;margin:-3px 0px -3px 0px;}"  
8.                          );  
9. }  

7、其他

[html] view plaincopy

1. QPushButton：  
2. 下面我们将通过一个按钮的部件来设置属性样式：  
3. 首先来设置一下样式：  
4. QPushButton#evilButton { background-color: red }  
5. 说明设置的当前的按钮为红色。 作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。  
6. QPushButton#evilButton {  
7. background-color: red;  
8. border-style: outset;  
9. border-width: 2px;  
10. border-color: beige;  
11. }  
12. 在这里设置了一个边界的类型与边界的宽度。 这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt的变成环境当中去尝试。即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。 首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。  
13. QPushButton#evilButton {  
14. background-color: red;  
15. border-style: outset;  
16. border-width: 2px;  
17. border-radius: 10px;  
18. border-color: beige;  
19. font: bold 14px;  
20. min-width: 10em;  
21. padding: 6px;  
22. }  
23. 如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。 所以就需要指定一个合适的背景颜色与不一样的边界类型。  
24. QPushButton#evilButton {  
25. background-color: red;  
26. border-style: outset;  
27. border-width: 2px;  
28. border-radius: 10px;  
29. border-color: beige;  
30. font: bold 14px;  
31. min-width: 10em;  
32. padding: 6px;  
33. }  
34. QPushButton#evilButton:pressed {  
35. background-color: rgb(224, 0, 0);  
36. border-style: inset;  
37. }  
38. 指定QPushButton 菜单指示器的子控制  
39. 子控提供了访问子子元素的功能， 例如通常的时候一个按钮将会管理一个菜单，  
40. QPushButton#evilButton::menu-indicator {  
41. image: url(myindicator.png);  
42. }  
43. 同时如果美化一个按钮的话， 那么将可以通过定位符来确定美化按钮的路径， 通常可以是一个图片。  
44. QPushButton::menu-indicator {  
45. image: url(myindicator.png);  
46. subcontrol-position: right center;  
47. subcontrol-origin: padding;  
48. left: -2px;  
49. }  
50. 经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。  
51. 定制按钮  
52. QPushButton {  
53. border: 2px solid #8f8f91;  
54. border-radius: 6px;  
55. background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
56. stop: 0 #f6f7fa, stop: 1 #dadbde);  
57. min-width: 80px;  
58. }  
59. QPushButton:pressed {  
60. background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
61. stop: 0 #dadbde, stop: 1 #f6f7fa);  
62. }  
63. QPushButton:flat {  
64. border: none;  
65. }  
66. QPushButton:default {  
67. border-color: navy;  
68. }  
69. QPushButton:open {  
70. background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
71. stop: 0 #dadbde, stop: 1 #f6f7fa);  
72. }  
73. QPushButton::menu-indicator {  
74. image: url(menu_indicator.png);  
75. subcontrol-origin: padding;  
76. subcontrol-position: bottom right;  
77. }  
78. QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {  
79. position: relative;  
80. top: 2px; left: 2px;  
81. }  
82. QSlider：  
83.   
84. 下面的横向的slider  
85. QSlider::groove:horizontal {  
86. border: 1px solid #999999;  
87. height: 8px;  
88. background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);  
89. margin: 2px 0;  
90. }  
91. QSlider::handle:horizontal {  
92. background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);  
93. border: 1px solid #5c5c5c;  
94. width: 18px;  
95. margin: -2px 0;  
96. border-radius: 3px;  
97. }  
98. QSlider::groove:vertical {  
99. background: red;  
100. position: absolute;  
101. left: 4px; right: 4px;  
102. }  
103. QSlider::handle:vertical {  
104. height: 10px;  
105. background: green;  
106. margin: 0 -4px;  
107. }  
108. QSlider::add-page:vertical {  
109. background: white;  
110. }  
111. QSlider::sub-page:vertical {  
112. background: pink;  
113. }  
114. QSizeGrip：  
115. 一般讲通过一个图片进行设置 ：  
116. QSizeGrip {  
117. image: url(:/images/sizegrip.png);  
118. width: 16px;  
119. height: 16px;  
120. }  
121. 定制QSplitter：  
122. QSplitter::handle {  
123. image: url(images/splitter.png);  
124. }  
125. QSplitter::handle:horizontal {  
126. height: 2px;  
127. }  
128. QSplitter::handle:vertical {  
129. width: 2px;  
130. }  
131. QStatusBar：  
132. 将提供一个状态栏的边框与项目的定制：  
133. QStatusBar {  
134. background: brown;  
135. }  
136. QStatusBar::item {  
137. border: 1px solid red;  
138. border-radius: 3px;  
139. }  
140. QTabWidget与QTabBar：  
141. QTabWidget::pane {  
142. border-top: 2px solid #C2C7CB;  
143. }  
144. QTabWidget::tab-bar {  
145. left: 5px; }  
146. QTabBar::tab {  
147. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
148. stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
149. stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
150. border: 2px solid #C4C4C3;  
151. border-bottom-color: #C2C7CB;  
152. border-top-left-radius: 4px;  
153. border-top-right-radius: 4px;  
154. min-width: 8ex;  
155. padding: 2px;  
156. }  
157. QTabBar::tab:selected, QTabBar::tab:hover {  
158. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
159. stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
160. stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
161. }  
162. QTabBar::tab:selected {  
163. border-color: #9B9B9B;  
164. border-bottom-color: #C2C7CB;  
165. }  
166. QTabBar::tab:!selected {  
167. margin-top: 2px;  
168. }  
169. QTabWidget::pane {  
170. border-top: 2px solid #C2C7CB;  
171. }  
172. QTabWidget::tab-bar {  
173. left: 5px;  
174. }  
175. QTabBar::tab {  
176. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
177. stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
178. stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
179. border: 2px solid #C4C4C3;  
180. border-bottom-color: #C2C7CB;  
181. border-top-left-radius: 4px;  
182. border-top-right-radius: 4px;  
183. min-width: 8ex;  
184. padding: 2px;  
185. }  
186. QTabBar::tab:selected, QTabBar::tab:hover {  
187. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
188. stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
189. stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
190. }  
191. QTabBar::tab:selected {  
192. border-color: #9B9B9B;  
193. border-bottom-color: #C2C7CB;  
194. }  
195. QTabBar::tab:!selected {  
196. margin-top: 2px;  
197. }  
198. QTabBar::tab:selected {  
199. margin-left: -4px;  
200. margin-right: -4px;  
201. }  
202. QTabBar::tab:first:selected {  
203. margin-left: 0;  
204. }  
205. QTabBar::tab:last:selected {  
206. margin-right: 0;  
207. }  
208. QTabBar::tab:only-one {  
209. margin: 0;  
210. }  
211. QTabWidget::pane {  
212. border-top: 2px solid #C2C7CB;  
213. position: absolute;  
214. top: -0.5em;  
215. }  
216. QTabWidget::tab-bar {  
217. alignment: center;  
218. }  
219. QTabBar::tab {  
220. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
221. stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
222. stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
223. border: 2px solid #C4C4C3;  
224. border-bottom-color: #C2C7CB;  
225. border-top-left-radius: 4px;  
226. border-top-right-radius: 4px;  
227. min-width: 8ex;  
228. padding: 2px;  
229. }  
230. QTabBar::tab:selected, QTabBar::tab:hover {  
231. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
232. stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
233. stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
234. }  
235. QTabBar::tab:selected {  
236. border-color: #9B9B9B;  
237. border-bottom-color: #C2C7CB;  
238. }  
239. 定制QTableWidget  
240. 下面将设置QTableWidget 的粉色选中区域， 与白色背景。  
241. QTableWidget {  
242. selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,  
243. stop: 0 #FF92BB, stop: 1 white);  
244. }  
245. QTableWidget QTableCornerButton::section {  
246. background: red;  
247. border: 2px outset red;  
248. }  
249. QToolBox：  
250. 下面是对工具条的一些选项进行定制  
251. QToolBar {  
252. background: red;  
253. spacing: 3px;  
254. }  
255. QToolBar::handle {  
256. image: url(handle.png); //可以设置工具条的背景图片  
257. }  
258. 定制QToolBox  
259. 将使用到 tab 的子控部分  
260. QToolBox::tab {  
261. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
262. stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
263. stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
264. border-radius: 5px;  
265. color: darkgray;  
266. }  
267. QToolBox::tab:selected {  
268. font: italic;  
269. color: white;  
270. }  
271. 定制QToolButton  
272. QToolButton {  
273. border: 2px solid #8f8f91;  
274. border-radius: 6px;  
275. background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
276. stop: 0 #f6f7fa, stop: 1 #dadbde);  
277. }  
278. QToolButton[popupMode="1"] {  
279. padding-right: 20px;  
280. }  
281. QToolButton:pressed {  
282. background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
283. stop: 0 #dadbde, stop: 1 #f6f7fa);  
284. }  
285. QToolButton::menu-button {  
286. border: 2px solid gray;  
287. border-top-right-radius: 6px;  
288. border-bottom-right-radius: 6px;  
289. width: 16px;  
290. }  
291. QToolButton::menu-arrow {  
292. image: url(downarrow.png);  
293. }  
294. QToolButton::menu-arrow:open {  
295. top: 1px; left: 1px;  
296. }  
297. QTreeView：  
298. QTreeView::branch {  
299. background: palette(base);  
300. }  
301. QTreeView::branch:has-siblings:!adjoins-item {  
302. background: cyan;  
303. }  
304. QTreeView::branch:has-siblings:adjoins-item {  
305. background: red;  
306. }  
307. QTreeView::branch:!has-children:!has-siblings:adjoins-item {  
308. background: blue;  
309. }  
310. QTreeView::branch:closed:has-children:has-siblings {  
311. background: pink;  
312. }  
313. QTreeView::branch:has-children:!has-siblings:closed {  
314. background: gray;  
315. }  
316. QTreeView::branch:open:has-children:has-siblings {  
317. background: magenta;  
318. }  
319. QTreeView::branch:open:has-children:!has-siblings {  
320. background: green;  
321. }  

三、总结

（1）各个子对象和qApp全局都可以设置样式表，定义特定的Qt风格。
（2）可以参考Qt的官方文档http://doc.qt.io/qt-4.8/stylesheet-reference.html#font和http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qlineedit，也可在QtCreator的内置文档中查看。

（3）若有不足，请留言，在此先感谢！

FROM: http://blog.csdn.net/taiyang1987912/article/details/40979309