QTabWidget和QTabBar的外观定制

转自http://developer.qt.nokia.com/doc/qt-4.8/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar

Customizing QTabWidget and QTabBar

For the screenshot above, we need a stylesheet as follows:

[cpp]  view plain  copy

 print ?

1. QTabWidget::pane { /* The tab widget frame */  
2.     border-top: 2px solid #C2C7CB;  
3. }  
4.   
5. QTabWidget::tab-bar {  
6.     left: 5px; /* move to the right by 5px */  
7. }  
8.   
9. /* Style the tab using the tab sub-control. Note that 
10.     it reads QTabBar _not_ QTabWidget */  
11. QTabBar::tab {  
12.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
13.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
14.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
15.     border: 2px solid #C4C4C3;  
16.     border-bottom-color: #C2C7CB; /* same as the pane color */  
17.     border-top-left-radius: 4px;  
18.     border-top-right-radius: 4px;  
19.     min-width: 8ex;  
20.     padding: 2px;  
21. }  
22.   
23. QTabBar::tab:selected, QTabBar::tab:hover {  
24.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
25.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
26.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
27. }  
28.   
29. QTabBar::tab:selected {  
30.     border-color: #9B9B9B;  
31.     border-bottom-color: #C2C7CB; /* same as pane color */  
32. }  
33.   
34. QTabBar::tab:!selected {  
35.     margin-top: 2px; /* make non-selected tabs look smaller */  
36. }  

Often we require the tabs to overlap to look like below:

For a tab widget that looks like above, we make use of negative margins. The resulting stylesheet looks like this:

[cpp]  view plain  copy

 print ?

1. QTabWidget::pane { /* The tab widget frame */  
2.     border-top: 2px solid #C2C7CB;  
3. }  
4.   
5. QTabWidget::tab-bar {  
6.     left: 5px; /* move to the right by 5px */  
7. }  
8.   
9. /* Style the tab using the tab sub-control. Note that 
10.     it reads QTabBar _not_ QTabWidget */  
11. QTabBar::tab {  
12.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
13.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
14.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
15.     border: 2px solid #C4C4C3;  
16.     border-bottom-color: #C2C7CB; /* same as the pane color */  
17.     border-top-left-radius: 4px;  
18.     border-top-right-radius: 4px;  
19.     min-width: 8ex;  
20.     padding: 2px;  
21. }  
22.   
23. QTabBar::tab:selected, QTabBar::tab:hover {  
24.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
25.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
26.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
27. }  
28.   
29. QTabBar::tab:selected {  
30.     border-color: #9B9B9B;  
31.     border-bottom-color: #C2C7CB; /* same as pane color */  
32. }  
33.   
34. QTabBar::tab:!selected {  
35.     margin-top: 2px; /* make non-selected tabs look smaller */  
36. }  
37.   
38. /* make use of negative margins for overlapping tabs */  
39. QTabBar::tab:selected {  
40.     /* expand/overlap to the left and right by 4px */  
41.     margin-left: -4px;  
42.     margin-right: -4px;  
43. }  
44.   
45. QTabBar::tab:first:selected {  
46.     margin-left: 0; /* the first selected tab has nothing to overlap with on the left */  
47. }  
48.   
49. QTabBar::tab:last:selected {  
50.     margin-right: 0; /* the last selected tab has nothing to overlap with on the right */  
51. }  
52.   
53. QTabBar::tab:only-one {  
54.     margin: 0; /* if there is only one tab, we don't want overlapping margins */  
55. }  

To move the tab bar to the center (as below), we require the following stylesheet:

[cpp]  view plain  copy

 print ?

1. QTabWidget::pane { /* The tab widget frame */  
2.     border-top: 2px solid #C2C7CB;  
3.     position: absolute;  
4.     top: -0.5em;  
5. }  
6.   
7. QTabWidget::tab-bar {  
8.     alignment: center;  
9. }  
10.   
11. /* Style the tab using the tab sub-control. Note that 
12.     it reads QTabBar _not_ QTabWidget */  
13. QTabBar::tab {  
14.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
15.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,  
16.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);  
17.     border: 2px solid #C4C4C3;  
18.     border-bottom-color: #C2C7CB; /* same as the pane color */  
19.     border-top-left-radius: 4px;  
20.     border-top-right-radius: 4px;  
21.     min-width: 8ex;  
22.     padding: 2px;  
23. }  
24.   
25. QTabBar::tab:selected, QTabBar::tab:hover {  
26.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
27.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,  
28.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);  
29. }  
30.   
31. QTabBar::tab:selected {  
32.     border-color: #9B9B9B;  
33.     border-bottom-color: #C2C7CB; /* same as pane color */  
34. }  

The tear indicator and the scroll buttons can be further customized as follows:

[cpp]  view plain  copy

 print ?

1. QTabBar::tear {  
2.     image: url(tear_indicator.png);  
3. }  
4.   
5. QTabBar::scroller { /* the width of the scroll buttons */  
6.     width: 20px;  
7. }  
8.   
9. QTabBar QToolButton { /* the scroll buttons are tool buttons */  
10.     border-image: url(scrollbutton.png) 2;  
11.     border-width: 2px;  
12. }  
13.   
14. QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */  
15.     image: url(rightarrow.png);  
16. }  
17.   
18. QTabBar QToolButton::left-arrow {  
19.     image: url(leftarrow.png);  
20. }  

Since Qt 4.6 the close button can be customized as follow:

[cpp]  view plain  copy

 print ?

1. QTabBar::close-button {  
2.     image: url(close.png)  
3.     subcontrol-position: left;  
4. }  
5. QTabBar::close-button:hover {  
6.     image: url(close-hover.png)  
7. }