Qt介面美工例項
Qt StyleSheet樣式表例項
在涉及到Qt 美工的時候首先需要掌握CSS級聯樣式表。
下面將通過幾個例子來介紹一下怎樣使用Qt中的部件型別設計。自定義的前臺背景與後臺背景的顏色：
如果需要一個文字編輯器的背景變為黃色，下面是程式碼行：
qApp->setStyleSheet("QLineEdit{ background-color: yellow }");
針對一個對話方塊的內容中使用QLineEdit以及QLineEdit的子類的背景都變成黃色， 下面是程式碼：
myDialog ->setStyleSheet("QLineEdit{ background-color: yellow }");
如果只需要制定一個QLineEdit的內容， 將使用QObject::setObjectName() 下面是一個例項：
myDialog->setStyleSheet("QLineEdit#nameEdit{ background-color: yellow }");
同時也可以針對每一個指定的部件做直接的型別設定，下面是一個例項：
ui.nameEdit->setStyleSheet("background-color:yellow");
為了做一個鮮明的對比，將要為文字設定合適的顏色。
nameEdit->setStyleSheet("color:blue; background-color: yellow");
當然最好的辦法還有針對選擇的文字來進行設定，下面設定了一個選擇文字的型別屬性：nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color:yellow;"
"selection-background-color: blue;");
在有一些情況下，不需要使用者參與， 而有軟體設計人員來自己制定樣式，即使這些是有違審美角度。 下面就從應用程式開發角度來設計樣式。
*[mandatoryField="true"]{ background-color: yellow }
上面的意思是一些強制的區域是需要用Qt 的屬性管理來強制設定成為黃色的背景。
這樣一些強制的部件，將需要通過函式來設定當前的屬性已經被強制設定，下面是實現的程式碼：
QLineEdit*nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField",true);
QLineEdit*emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField",true);
QSpinBox*ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField",true);
QPushButton * evilButton= new QPushButton (this);
evilButton ->setText("Button");
下面我們將通過一個按鈕的部件來設定屬性樣式：
首先來設定一下樣式：
QPushButton#evilButton{ background-color: red }
說明設定的當前的按鈕為紅色。作為一個flat 平滑的按鈕時沒有邊界的。 下面是來改進一下對邊界的設定。
QPushButton#evilButton{
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
}
在這裡設定了一個邊界的型別與邊界的寬度。 這樣看上去就好多了，文件中無法展現圖片，有興趣可以去Qt 的變成環境當中去嘗試。即使這樣設計， 按鈕看上去也是顯得混亂，與主部件沒有辦法分開。首先是在邊界設定出一個空間出來， 並且強制的制定最小寬度，與環繞的弧度，並且提供一個按鈕的字型設定， 似的按鈕看上去比較好看。
QPushButton#evilButton{
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 6px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
如此這樣當我們點選按鈕的時候按鈕也不會發生什麼樣的深刻變化。 所以就需要指定一個合適的背景顏色與不一樣的邊界型別。
QPushButton#evilButton{
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed{
background-color: rgb(224, 0, 0);
border-style: inset;
}
指定QPushButton 選單指示器的子控制子控提供了訪問子子元素的功能，例如通常的時候一個按鈕將會管理一個選單，
QPushButton#evilButton::menu-indicator{
image: url(myindicator.png);
}
同時如果美化一個按鈕的話，那麼將可以通過定位符來確定美化按鈕的路徑， 通常可以是一個圖片。
QPushButton::menu-indicator{
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}
經過以上的設定那麼QPushButton 將會在方格的中心顯示一個myindicator.png 的圖片。
複雜區域的例子：
當應對於一個使用者可編輯可輸入的部件的時候， 將需要設計到使用者選擇區域的顏色設定，與型別設定， 下面將通過使用QLineEdit 部件來進行演示：
QLineEdit { color:red }
QLineEdit[readOnly="true"]{color:gray}
在團隊開發的時候， 需要設計到不同顏色的設定，或者說不同型別的設定，那麼就需要在樣式編輯當中有多種選擇，將不需要的那部分，註釋掉：
QLineEdit { color:red }
QLineEdit[readOnly="true"]{ color: gray }
#registrationDialogQLineEdit { color: brown }
自定義制定的部件
這個部分提供了一些自定義特殊部件的某種樣式
定製QAbstractScrollArea
比如說一些QAbstractScrollArea 類， 例如 QTextEdit 與QTextBrowser . 同時可以使用後臺的屬性來進行設定。 例如來設定一個背景圖片。
QTextEdit,QListView {
background-color: white;
background-image: url(draft.png);
background-attachment: scroll;
}
下面的程式碼是讓背景圖片與可瀏覽的區域大小相同：
QTextEdit,QListView {
background-color: white;
background-image: url(draft.png);
background-attachment: fixed;
}
QCheckBox 與QRadioButton 具有想色的屬性， 他們之間的不同時QCheckBox是返回當前的狀態：
QCheckBox {
spacing: 5px;
}
QCheckBox::indicator{
width: 13px;
height: 13px;
}
QCheckBox::indicator:unchecked{
image: url(:/images/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover{
image:url(:/images/checkbox_unchecked_hover.png);
}
QCheckBox::indicator:unchecked:pressed{
image:url(:/images/checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked{
image: url(:/images/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover{
image:url(:/images/checkbox_checked_hover.png);
}
QCheckBox::indicator:checked:pressed{
image:url(:/images/checkbox_checked_pressed.png);
}
QCheckBox::indicator:indeterminate:hover{
image:url(:/images/checkbox_indeterminate_hover.png);
}
QCheckBox::indicator:indeterminate:pressed{
image:url(:/images/checkbox_indeterminate_pressed.png);
}
下面是對QComboBox下拉列表框進行的樣式設計：
QComboBox {
border: 1px solid gray;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}
QComboBox:editable{
background: white;
}
QComboBox:!editable,QComboBox::drop-down:editable {
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);
}
/* QComboBox gets the "on" statewhen the popup is open */
QComboBox:!editable:on,QComboBox::drop-down:editable:on {
background: qlineargradient(x1: 0, y1: 0, x2:0, y2: 1,
stop: 0#D3D3D3, stop: 0.4 #D8D8D8,
stop: 0.5#DDDDDD, stop: 1.0 #E1E1E1);
}
QComboBox:on { /*shift the text when the popup opens */
padding-top: 3px;
padding-left: 4px;
}
QComboBox::drop-down{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid; /* 僅此一行 */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow{
image:url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}
QComboBox::down-arrow:on{ /* shift the arrow when popup is open */
top: 1px;
left: 1px;
}
自定的QSpinBox
QSpinBox {
padding-right: 15px; /* make room for thearrows */
border-image: url(:/images/frame.png) 4;
border-width: 3;
}
QSpinBox::up-button{
subcontrol-origin: border;
subcontrol-position: top right; /*position at the top right corner */
width: 16px; /* 16 + 2*1px border-width =15px padding + 3px parent border */
border-image: url(:/images/spinup.png) 1;
border-width: 1px;
}
QSpinBox::up-button:hover{
border-image:url(:/images/spinup_hover.png) 1;
}
QSpinBox::up-button:pressed{
border-image:url(:/images/spinup_pressed.png) 1;
}
QSpinBox::up-arrow{
image: url(:/images/up_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::up-arrow:disabled,QSpinBox::up-arrow:off { /* off state when value is max */
image: url(:/images/up_arrow_disabled.png);
}
QSpinBox::down-button{
subcontrol-origin: border;
subcontrol-position: bottom right; /*position at bottom right corner */
width: 16px;
border-image: url(:/images/spindown.png)1;
border-width: 1px;
border-top-width: 0;
}
QSpinBox::down-button:hover{
border-image:url(:/images/spindown_hover.png) 1;
}
QSpinBox::down-button:pressed{
border-image: url(:/images/spindown_pressed.png)1;
}
QSpinBox::down-arrow{
image: url(:/images/down_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state whenvalue in min */
image: url(:/images/down_arrow_disabled.png);
}
自定義的 QFrame
QFrame, QLabel,QToolTip {
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background-image: url(images/welcome.png);
}
定製QGroupbox
QGroupBox {
background-color: qlineargradient(x1: 0,y1: 0, x2: 0, y2: 1,
stop: 0#E0E0E0, stop: 1 #FFFFFF);
border: 2px solid gray;
border-radius: 5px;
margin-top: 1ex; /* leave space at the topfor the title */
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center; /*position at the top center */
padding: 0 3px;
background-color: qlineargradient(x1: 0,y1: 0, x2: 0, y2: 1,
stop: 0#FFOECE, stop: 1 #FFFFFF);
}
對於有一個可選擇的QGroupBox ， 使用{#indicator-sub}{::indicator} 他的型別控制就類似於QCheckBox.
QGroupBox::indicator{
width: 13px;
height: 13px;
}
QGroupBox::indicator:unchecked{
image:url(:/images/checkbox_unchecked.png);
}
定製 QHeaderView
QHeaderView::section{
background-color: qlineargradient(x1:0,y1:0, x2:0, y2:1,
stop:0#616161, stop: 0.5 #505050,
stop:0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
/* style the sort indicator */
QHeaderView::down-arrow{
image: url(down_arrow.png);
}
QHeaderView::up-arrow{
image: url(up_arrow.png);
}
定製QLineEdit
QLineEdit {
border: 1px solid gray;
border-radius: 4px;
padding: 0 8px;
background: white;
selection-background-color: darkgray;
}
當一個QLineEdit 需要使用一個密碼的模式的話那麼將設定成為QLineEdit::Password 這樣屬性就被使用了。
QLineEdit[echoMode="2"]{
lineedit-password-character: 9679;
}
QLineEdit:read-only{
background: lightblue;
}
定製QMenu
QMenu {
background-color: #ABABAB; /* 設定選單的背景 */
border: 1px solid black;
}
QMenu::item {
/* 設定選單的專案的背景 */
background-color: transparent;
}
QMenu::item:selected{ /* 當用戶使用滑鼠活著鍵盤進行選擇的時候選擇項的顏色 */
background-color: #654321;
}
對於選單部件的一些其他的選項，下面提供了許多高階的設定：
QMenu {
background-color: white;
margin: 2px; /* 圍繞選單的一些空間 */
}
QMenu::item {
padding: 2px 25px 2px 20px;
border: 1px solid transparent; /* reservespace for selection border */
}
QMenu::item:selected{
border-color: darkblue;
background: rgba(100, 100, 100, 150);
}
QMenu::icon:checked{ /* appearance of a 'checked' icon */
background: gray;
border: 1px inset gray;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
}
QMenu::separator {
height: 2px;
background: lightblue;
margin-left: 10px;
margin-right: 5px;
}
QMenu::indicator {
width: 13px;
height: 13px;
}
/* non-exclusive indicator = check box styleindicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked{
image:url(:/images/checkbox_unchecked.png);
}
QMenu::indicator:non-exclusive:unchecked:selected{
image:url(:/images/checkbox_unchecked_hover.png);
}
QMenu::indicator:non-exclusive:checked{
image: url(:/images/checkbox_checked.png);
}
QMenu::indicator:non-exclusive:checked:selected{
image: url(:/images/checkbox_checked_hover.png);
}
/* exclusive indicator = radio button styleindicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked{
image:url(:/images/radiobutton_unchecked.png);
}
QMenu::indicator:exclusive:unchecked:selected{
image:url(:/images/radiobutton_unchecked_hover.png);
}
QMenu::indicator:exclusive:checked{
image:url(:/images/radiobutton_checked.png);
}
QMenu::indicator:exclusive:checked:selected{
image:url(:/images/radiobutton_checked_hover.png);
}
定製選單條
QMenuBar {
background-color: qlineargradient(x1:0,y1:0, x2:0, y2:1,
stop:0lightgray, stop:1 darkgray);
}
QMenuBar::item {
spacing: 3px; /* 選單欄專案空間大小 */
padding: 1px 4px;
background: transparent;
border-radius: 4px;
}
QMenuBar::item:selected { /* 當用鍵盤或者滑鼠選擇的時候的背景 */
background: #a8a8a8;
}
QMenuBar::item:pressed{
background: #888888;
}
定製進度條
QProgressBar {
border: 2px solid grey;
border-radius: 5px;
}
QProgressBar::chunk{
background-color: #05B8CC;
width: 20px;
}
QProgressBar {
border: 2px solid grey;
border-radius: 5px;
text-align: center;
}
QProgressBar::chunk{
background-color: #CD96CD;
width: 10px;
margin: 0.5px;
}
定製按鈕
QPushButton {
border: 1px solid #8f8f91;
border-radius: 3px;
background-color: qlineargradient(x1:0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
QPushButton:pressed{
background-color: qlineargradient(x1:0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none; /* 沒有邊框的按鈕 */
}
QPushButton:default{
border-color: navy; /* 使得按鈕顯示變得更加突出 */
}
QPushButton:open {/* when the button has its menu open */
background-color: qlineargradient(x1:0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1#f6f7fa);
}
QPushButton::menu-indicator{
image: url(menu_indicator.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed,QPushButton::menu-indicator:open {
position: relative;
top: 2px; left: 2px; /* shift thearrow by 2 px */
}
定製 QRadioButton
QRadioButton::indicator{
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked{
image:url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover{
image: url(:/images/radiobutton_unchecked_hover.png);
}
QRadioButton::indicator:unchecked:pressed{
image:url(:/images/radiobutton_unchecked_pressed.png);
}
QRadioButton::indicator::checked{
image:url(:/images/radiobutton_checked.png);
}
QRadioButton::indicator:checked:hover{
image:url(:/images/radiobutton_checked_hover.png);
}
QRadioButton::indicator:checked:pressed{
image:url(:/images/radiobutton_checked_pressed.png);
}
定製ScrollBar
下面是一個填充的實體的灰色邊框的滾動條
QScrollBar:horizontal{
border: 2px solid grey;
background: #32CC99;
height: 15px;
margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal{
background: white;
min-width: 20px;
}
QScrollBar::add-line:horizontal{
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal{
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
左箭頭與右箭頭都分別設定成為灰色的邊框與白色的背景，所以，兩邊都可以設定一個嵌入的圖片。
QScrollBar:left-arrow:horizontal,QScrollBar::right-arrow:horizontal {
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
background: none;
}
如果希望兩個箭頭都在同一個方向，例如蘋果機的介面， 將使用下面的設定模式：
QScrollBar:horizontal{
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal{
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal{
background: blue;
width: 16px;
subcontrol-position: right;
subcontrol-origin: margin;
border: 2px solid black;
}
QScrollBar::sub-line:horizontal{
background: magenta;
width: 16px;
subcontrol-position: top right;
subcontrol-origin: margin;
border: 2px solid black;
position: absolute;
right: 20px;
}
QScrollBar:left-arrow:horizontal,QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
background: none;
}
定製QSizeGrip
一般講通過一個圖片進行設定：
QSizeGrip {
image: url(:/images/sizegrip.png);
width: 16px;
height: 16px;
}
定製QSlider
下面的橫向的slider
QSlider::groove:horizontal{
border: 1px solid #999999;
height: 8px; /* the groove expands to thesize of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0,y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
}
QSlider::handle:horizontal{
background: qlineargradient(x1:0,y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed bydefault on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}
QSlider::groove:vertical{
background: red;
position: absolute; /* absolutelyposition 4px from the left and right of the widget. setting margins on thewidget should work too... */
left: 4px; right: 4px;
}
QSlider::handle:vertical{
height: 10px;
background: green;
margin: 0 -4px; /* expand outside thegroove */
}
QSlider::add-page:vertical{
background: white;
}
QSlider::sub-page:vertical{
background: pink;
}
定製QSplitter
QSplitter::handle{
image: url(images/splitter.png);
}
QSplitter::handle:horizontal{
height: 2px;
}
QSplitter::handle:vertical{
width: 2px;
}
定製狀態條 QStatusBar
將提供一個狀態列的邊框與專案的定製：
QStatusBar {
background: brown;
}
QStatusBar::item {
border: 1px solid red;
border-radius: 3px;
}
定製 QTabWidget 與QTabBar
QTabWidget::pane {/* The tab widget frame */
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar{
left: 5px; /* move to the right by 5px*/
}
/* Style the tabusing the tab sub-control. Note thatt 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; /* sameas 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; /* sameas pane color */
}
QTabBar::tab:!selected{
margin-top: 2px; /* make non-selectedtabs look smaller */
}
QTabWidget::pane {/* The tab widget frame */
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar{
left: 5px; /* move to the right by 5px*/
}
/* Style the tabusing 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; /* sameas 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; /* sameas pane color */
}
QTabBar::tab:!selected{
margin-top: 2px; /* make non-selectedtabs look smaller */
}
/* make use ofnegative margins for overlapping tabs */
QTabBar::tab:selected{
/* expand/overlap to the left andright by 4px */
margin-left: -4px;
margin-right: -4px;
}
QTabBar::tab:first:selected{
margin-left: 0; /* the first selectedtab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected{
margin-right: 0; /* the last selectedtab has nothing to overlap with on the right */
}
QTabBar::tab:only-one{
margin: 0; /* if there is only onetab, we don't want overlapping margins */
}
QTabWidget::pane {/* The tab widget frame */
border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
}
QTabWidget::tab-bar{
alignment: center;
}
/* Style the tabusing 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; /* sameas 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; /* sameas pane color */
}
定製QTableWidget
下面將設定QTableWidget 的粉色選中區域， 與白色背景。
QTableWidget {
selection-background-color:qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
stop: 0 #FF92BB, stop: 1 white);
}
QTableWidgetQTableCornerButton::section {
background: red;
border: 2px outset red;
}
定製工具條
下面是對工具條的一些選項進行定製
QToolBar {
background: red;
spacing: 3px; /* spacing between itemsin the tool bar */
}
QToolBar::handle {
image: url(handle.png); //可以設定工具條的背景圖片
}
定製QToolBox
將使用到 tab 的子控部分
QToolBox::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-radius: 5px;
color: darkgray;
}
QToolBox::tab:selected{ /* italicize selected tabs */
font: italic;
color: white;
}
定製QToolButton
QToolButton { /*all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1:0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"]{ /* only for MenuButtonPopup */
padding-right: 20px; /* make way forthe popup button */
}
QToolButton:pressed{
background-color: qlineargradient(x1:0, y1: 0, x2: 0, y2: 1,
stop: 0#dadbde, stop: 1 #f6f7fa);
}
/* the subcontrolsbelow are used only in the MenuButtonPopup mode */
QToolButton::menu-button{
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20pxallocated above */
width: 16px;
}
QToolButton::menu-arrow{
image: url(downarrow.png);
}
QToolButton::menu-arrow:open{
top: 1px; left: 1px; /* shift it a bit*/
}
定製QTreeView
QTreeView::branch{
background: palette(base);
}
QTreeView::branch:has-siblings:!adjoins-item{
background: cyan;
}
QTreeView::branch:has-siblings:adjoins-item{
background: red;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item{
background: blue;
}
QTreeView::branch:closed:has-children:has-siblings{
background: pink;
}
QTreeView::branch:has-children:!has-siblings:closed{
background: gray;
}
QTreeView::branch:open:has-children:has-siblings{
background: magenta;
}
QTreeView::branch:open:has-children:!has-siblings{
background: green;
}
下面是幾個樣式，當選擇顏色的時候可使用十六進位制的資料來表達：
QRadioButton{
background:#5F7536;
color:#CBF57D;
font:bold;
}