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:

 QTabWidget::pane { /* The tab widget frame */     border-top: 2px solid #C2C7CB; } QTabWidget::tab-bar {     left: 5px; /* move to the right by 5px */ } /* Style the tab using the tab sub-control. Note that     it reads QTabBar _not_ QTabWidget */ QTabBar::tab {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);     border: 2px solid #C4C4C3;     border-bottom-color: #C2C7CB; /* same as the pane color */     border-top-left-radius: 4px;     border-top-right-radius: 4px;     min-width: 8ex;     padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected {     border-color: #9B9B9B;     border-bottom-color: #C2C7CB; /* same as pane color */ } QTabBar::tab:!selected {     margin-top: 2px; /* make non-selected tabs look smaller */ }

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:

 QTabWidget::pane { /* The tab widget frame */     border-top: 2px solid #C2C7CB; } QTabWidget::tab-bar {     left: 5px; /* move to the right by 5px */ } /* Style the tab using the tab sub-control. Note that     it reads QTabBar _not_ QTabWidget */ QTabBar::tab {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);     border: 2px solid #C4C4C3;     border-bottom-color: #C2C7CB; /* same as the pane color */     border-top-left-radius: 4px;     border-top-right-radius: 4px;     min-width: 8ex;     padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected {     border-color: #9B9B9B;     border-bottom-color: #C2C7CB; /* same as pane color */ } QTabBar::tab:!selected {     margin-top: 2px; /* make non-selected tabs look smaller */ } /* make use of negative margins for overlapping tabs */ QTabBar::tab:selected {     /* expand/overlap to the left and right by 4px */     margin-left: -4px;     margin-right: -4px; } QTabBar::tab:first:selected {     margin-left: 0; /* the first selected tab has nothing to overlap with on the left */ } QTabBar::tab:last:selected {     margin-right: 0; /* the last selected tab has nothing to overlap with on the right */ } QTabBar::tab:only-one {     margin: 0; /* if there is only one tab, we don't want overlapping margins */ }

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

 QTabWidget::pane { /* The tab widget frame */     border-top: 2px solid #C2C7CB;     position: absolute;     top: -0.5em; } QTabWidget::tab-bar {     alignment: center; } /* Style the tab using the tab sub-control. Note that     it reads QTabBar _not_ QTabWidget */ QTabBar::tab {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);     border: 2px solid #C4C4C3;     border-bottom-color: #C2C7CB; /* same as the pane color */     border-top-left-radius: 4px;     border-top-right-radius: 4px;     min-width: 8ex;     padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected {     border-color: #9B9B9B;     border-bottom-color: #C2C7CB; /* same as pane color */ }

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

 QTabBar::tear {     image: url(tear_indicator.png); } QTabBar::scroller { /* the width of the scroll buttons */     width: 20px; } QTabBar QToolButton { /* the scroll buttons are tool buttons */     border-image: url(scrollbutton.png) 2;     border-width: 2px; } QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */     image: url(rightarrow.png); } QTabBar QToolButton::left-arrow {     image: url(leftarrow.png); }

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

 QTabBar::close-button {     image: url(close.png)     subcontrol-position: left; } QTabBar::close-button:hover {     image: url(close-hover.png) }