QT学习1 QSlider 更改样式

Seriously. I don’t know how I ever created a Qt user interface without using stylesheets. This was, by far, the best idea Trolltech ever had.

For today’s show-and-tell, I give you a nifty-looking QSlider with some nice gradient style applied to it:

The handle has a nice hover effect, the bar has a moving gradient as you slide the slider, and it looks good when disabled. Notice also the rounded corners. No image files were harmed in the making of this widget.

Here’s the stylesheet code (I used Qt’s example as a starting point).

[css]  view plain  copy

1. QSlider::groove:horizontal {  
2. border: 1px solid #bbb;  
3. background: white;  
4. height: 10px;  
5. border-radius: 4px;  
6. }  
7.   
8. QSlider::sub-page:horizontal {  
9. background: qlineargradient(x1: 0, y1: 0,    x2: 0, y2: 1,  
10.     stop: 0 #66e, stop: 1 #bbf);  
11. background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,  
12.     stop: 0 #bbf, stop: 1 #55f);  
13. border: 1px solid #777;  
14. height: 10px;  
15. border-radius: 4px;  
16. }  
17.   
18. QSlider::add-page:horizontal {  
19. background: #fff;  
20. border: 1px solid #777;  
21. height: 10px;  
22. border-radius: 4px;  
23. }  
24.   
25. QSlider::handle:horizontal {  
26. background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  
27.     stop:0 #eee, stop:1 #ccc);  
28. border: 1px solid #777;  
29. width: 13px;  
30. margin-top: -2px;  
31. margin-bottom: -2px;  
32. border-radius: 4px;  
33. }  
34.   
35. QSlider::handle:horizontal:hover {  
36. background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  
37.     stop:0 #fff, stop:1 #ddd);  
38. border: 1px solid #444;  
39. border-radius: 4px;  
40. }  
41.   
42. QSlider::sub-page:horizontal:disabled {  
43. background: #bbb;  
44. border-color: #999;  
45. }  
46.   
47. QSlider::add-page:horizontal:disabled {  
48. background: #eee;  
49. border-color: #999;  
50. }  
51.   
52. QSlider::handle:horizontal:disabled {  
53. background: #eee;  
54. border: 1px solid #aaa;  
55. border-radius: 4px;  
56. }  

附：有用的border-radius相关项

 "border-top-left-radius: 12px;\n"
  "border-bottom-left-radius: 12px;\n"
  "border-top-right-radius: 12px;\n"
   "border-bottom-right-radius: 12px;\n"

Enjoy!

//add :groove为槽的颜色，handle为按钮的颜色，add-page 及sub-page分别问按钮前后的颜色，如果groove与add-page、sub-page同在，那么groove的颜色会被覆盖掉。