<link rel="prev" href="stylesheet-reference.html"> [Qt Style Sheets Reference](stylesheet-reference.html) * [Style Sheet Usage](qtqss.html #style-sheet-usage) * [自定義 the Foreground and Background Colors](qtqss.html #customizing-the-foreground-and-background-colors) * [自定義 Using Dynamic Properties](qtqss.html #customizing-using-dynamic-properties) * [自定義 a QPushButton Using the Box Model](qtqss.html #customizing-a-qpushbutton-using-the-box-model) * [自定義 the QPushButton's Menu Indicator Sub-Control](qtqss.html #customizing-the-qpushbutton-s-menu-indicator-sub-control) * [Complex Selector Example](qtqss.html #complex-selector-example) * [自定義 specific widgets](qtqss.html #customizing-specific-widgets) * [自定義 QAbstractScrollArea](qtqss.html #customizing-qabstractscrollarea) * [自定義 QCheckBox](qtqss.html #customizing-qcheckbox) * [自定義 QComboBox](qtqss.html #customizing-qcombobox) * [自定義 QDockWidget](qtqss.html #customizing-qdockwidget) * [自定義 QFrame](qtqss.html #customizing-qframe) * [自定義 QGroupBox](qtqss.html #customizing-qgroupbox) * [自定義 QHeaderView](qtqss.html #customizing-qheaderview) * [自定義 QLineEdit](qtqss.html #customizing-qlineedit) * [自定義 QListView](qtqss.html #customizing-qlistview) * [自定義 QMainWindow](qtqss.html #customizing-qmainwindow) * [自定義 QMenu](qtqss.html #customizing-qmenu) * [自定義 QMenuBar](qtqss.html #customizing-qmenubar) * [自定義 QProgressBar](qtqss.html #customizing-qprogressbar) * [自定義 QPushButton](qtqss.html #customizing-qpushbutton) * [自定義 QRadioButton](qtqss.html #customizing-qradiobutton) * [自定義 QScrollBar](qtqss.html #customizing-qscrollbar) * [自定義 QSizeGrip](qtqss.html #customizing-qsizegrip) * [自定義 QSlider](qtqss.html #customizing-qslider) * [自定義 QSpinBox](qtqss.html #customizing-qspinbox) * [自定義 QSplitter](qtqss.html #customizing-qsplitter) * [自定義 QStatusBar](qtqss.html #customizing-qstatusbar) * [自定義 QTabWidget and QTabBar](qtqss.html #customizing-qtabwidget-and-qtabbar) * [自定義 QTableView](qtqss.html #customizing-qtableview) * [自定義 QToolBar](qtqss.html #customizing-qtoolbar) * [自定義 QToolBox](qtqss.html #customizing-qtoolbox) * [自定義 QToolButton](qtqss.html #customizing-qtoolbutton) * [自定義 QToolTip](qtqss.html #customizing-qtooltip) * [自定義 QTreeView](qtqss.html #customizing-qtreeview) * [Common mistakes](qtqss.html #common-mistakes) * [QPushButton and images](qtqss.html #qpushbutton-and-images) ## Reference ## Reference [Home](index.html)?·?[All Classes](index.htm)?·?[Modules](index.htm)??·?[QSS HELP](qss.html)??·?[QSS 案例](qtqss.html)?·?[VER007 HOME](HTTP://VER007.COM) # Qt 樣式表 例子 ## ## 樣式表的使用 ### 自定義 前景和背景顏色 讓我們通過設置黃色是所有的背景顏色開始 [QLineEdit](qtqss.html#qlineedit) 某個應用程序中。?這可以實現如下. ``` qApp->setStyleSheet("QLineEdit { background-color: yellow }"); ``` 如果我們希望屬性只適用于[QLineEdit](qtqss.html#qlineedit)s中的一個特定的對話框的子項（或孫子或重孫子） ``` myDialog->setStyleSheet("QLineEdit { background-color: yellow }"); ``` 如果我們希望屬性只適用于一個特定的[QLineEdit](qtqss.html#qlineedit), 我們可以給它使用名稱 [QObject::setObjectName](qobject.html#objectName-prop)() 并使用一個ID選擇器來引用它： ``` myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }"); ``` 或者，我們可以設置[background-color](stylesheet-reference.html#background-prop) 的直接財產[QLineEdit](qtqss.html#qlineedit), 省略了選擇 ``` 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;"); ``` ### 使用自定義動態屬性 還有，我們需要提出一個具有強制性的字段的表格很多情況下。?以指示該字段是強制性的，一次有效（雖然美觀可疑）解決方案是使用黃色作為背景色為這些字段的用戶。?事實證明，這是非常容易使用Qt樣式表來實現。?首先，我們可以使用下面的應用程序范圍內的樣式表 ``` *[mandatoryField="true"] { background-color: yellow } ``` 這意味著，每個部件的mandatoryField?Qt的屬性設置為true，將有一個黃色的背景。 然后，對于每個必填字段部件，我們可以簡單地創建一個mandatoryField動態屬性，并將其設置為true。?例如： ``` [QLineEdit](qlineedit.html) *nameEdit = new [QLineEdit](qlineedit.html)(this); nameEdit->setProperty("mandatoryField", true); [QLineEdit](qlineedit.html) *emailEdit = new [QLineEdit](qlineedit.html)(this); emailEdit->setProperty("mandatoryField", true); [QSpinBox](qspinbox.html) *ageSpinBox = new [QSpinBox](qspinbox.html)(this); ageSpinBox->setProperty("mandatoryField", true); ``` ### 自定義QPushButton使用盒模型 這一次，我們將展示如何創建一個紅色[QPushButton](qtqss.html#qpushbutton). 這[QPushButton](qtqss.html#qpushbutton) 大概會被連接到一個極具破壞性的一段代碼。 首先，我們要使用這個樣式表： ``` [QPushButton](qpushbutton.html)#evilButton { background-color: red } ``` 但是，結果是一個沒有邊界沒有平整：  發生了什么事呢： * 我們已經提出，不能單獨使用本地樣式來滿足的請求（例如，Windows XP主題引擎不會讓我們指定按鈕的背景顏色）。 * 因此，按鈕被使用樣式表呈現。 * 我們沒有指定任何值[border-width](stylesheet-reference.html#border-width-prop) and [border-style](stylesheet-reference.html#border-style-prop), 所以默認情況下，我們得到的風格0像素寬的邊框none?。 讓我們通過指定邊界改善情況： ``` [QPushButton](qpushbutton.html)#evilButton { background-color: red; border-style: outset; border-width: 2px; border-color: beige; } ```  事情看起來已經好了很多。?但是，按鈕看起來有點局促。?讓我們來指定邊框，并使用文字之間的間距一些 [padding](stylesheet-reference.html#padding-prop). 此外，我們將執行的最小寬度，圓形邊角，并指定一個更大的字體，使按鈕看起來更好： ``` [QPushButton](qpushbutton.html)#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](qpushbutton.html)#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](qpushbutton.html)#evilButton:pressed { background-color: rgb(224, 0, 0); border-style: inset; } ``` ### 自定義QPushButton的菜單指示器分控 子控件授予訪問小窗口的子元素。 例如，一個 [QPushButton](qtqss.html#qpushbutton) 與菜單相關聯(使用 [QPushButton::setMenu](qpushbutton.html#setMenu)()) 有一個菜單指示符。 讓我們定制的紅色按鈕菜單指標: ``` [QPushButton](qpushbutton.html)#evilButton::menu-indicator { image: url(myindicator.png); } ``` 默認情況下，菜單指示器位于填充矩形的右下角。 我們可以通過指定改變這個 [subcontrol-position](stylesheet-reference.html#subcontrol-position-prop) [和 subcontrol-origin](stylesheet-reference.html#subcontrol-origin-prop) to以不同的錨定指標。 我們也可以用[top](stylesheet-reference.html#top-prop) and [left](stylesheet-reference.html#left-prop)由幾個像素來移動指針。 例如： ``` [QPushButton](qpushbutton.html)::menu-indicator { image: url(myindicator.png); subcontrol-position: right center; subcontrol-origin: padding; left: -2px; } ``` 這種定位的myindicator.png到的中間偏右 [QPushButton](qtqss.html#qpushbutton)'s [padding](stylesheet-reference.html#padding-prop) 矩形 (見 [subcontrol-origin](stylesheet-reference.html#subcontrol-origin-prop) 獲取更多信息). ### 復雜的選擇示例 由于紅色似乎是我們最喜歡的顏色，讓我們在文中 [QLineEdit](qtqss.html#qlineedit) 通過設置以下應用程序范圍的樣式表紅： ``` [QLineEdit](qlineedit.html) { color: red } ``` 但是，我們想給的視覺指示一個 [QLineEdit](qtqss.html#qlineedit) 是只讀使其顯示為灰色： ``` [QLineEdit](qlineedit.html) { color: red } [QLineEdit](qlineedit.html)[readOnly="true"] { color: gray } ``` 在某些時候，我們的設計團隊配備了所有的要求 [QLineEdit](qtqss.html#qlineedit) 在登記表（使用 [object name](qobject.html#objectName-prop) `registrationDialog`) 為棕色 ``` [QLineEdit](qlineedit.html) { color: red } [QLineEdit](qlineedit.html)[readOnly="true"] { color: gray } #registrationDialog QLineEdit { color: brown } ``` 一些UI設計的會議之后，我們決定，我們所有的 [QDialog](qdialog.html) 應該具有棕色[QLineEdit](qtqss.html#qlineedit)里: ``` [QLineEdit](qlineedit.html) { color: red } [QLineEdit](qlineedit.html)[readOnly="true"] { color: gray } [QDialog](qdialog.html) [QLineEdit](qlineedit.html) { color: brown } ``` ## 自定義特定的部件 本節提供了示例來使用自定義樣式表的特定部件。 ### 自定義 QAbstractScrollArea 任何背景 [QAbstractScrollArea](qabstractscrollarea.html) (項目的意見, [QTextEdit](qtqss.html#qtextedit) and [QTextBrowser](qtextbrowser.html)) 可以使用背景屬性進行設置。 例如，要設置一個背景圖像，與滾動條滾動： ``` [QTextEdit](qtextedit.html), [QListView](qlistview.html) { background-color: white; background-image: url(draft.png); background-attachment: scroll; } ``` 如果該背景圖像是被固定的視區： ``` [QTextEdit](qtextedit.html), [QListView](qlistview.html) { background-color: white; background-image: url(draft.png); background-attachment: fixed; } ``` ### 自定義 QCheckBox 一個定型 [QCheckBox](qcheckbox.html) is almost indentical to styling a [QRadioButton](qradiobutton.html). 的主要區別在于，一個三態 [QCheckBox](qcheckbox.html) 具有不確定狀態。 ``` [QCheckBox](qcheckbox.html) { spacing: 5px; } [QCheckBox](qcheckbox.html)::indicator { width: 13px; height: 13px; } [QCheckBox](qcheckbox.html)::indicator:unchecked { image: url(:/../img/checkbox_unchecked.png); } [QCheckBox](qcheckbox.html)::indicator:unchecked:hover { image: url(:/../img/checkbox_unchecked_hover.png); } [QCheckBox](qcheckbox.html)::indicator:unchecked:pressed { image: url(:/../img/checkbox_unchecked_pressed.png); } [QCheckBox](qcheckbox.html)::indicator:checked { image: url(:/../img/checkbox_checked.png); } [QCheckBox](qcheckbox.html)::indicator:checked:hover { image: url(:/../img/checkbox_checked_hover.png); } [QCheckBox](qcheckbox.html)::indicator:checked:pressed { image: url(:/../img/checkbox_checked_pressed.png); } [QCheckBox](qcheckbox.html)::indicator:indeterminate:hover { image: url(:/../img/checkbox_indeterminate_hover.png); } [QCheckBox](qcheckbox.html)::indicator:indeterminate:pressed { image: url(:/../img/checkbox_indeterminate_pressed.png); } ``` ### 自定義 QComboBox 我們將看看那里下拉一個按鈕一個例子 [QComboBox](qtqss.html#qcombobox) 出現“合并”與組合框框架 ``` [QComboBox](qcombobox.html) { border: 1px solid gray; border-radius: 3px; padding: 1px 18px 1px 3px; min-width: 6em; } [QComboBox](qcombobox.html):editable { background: white; } [QComboBox](qcombobox.html):!editable, [QComboBox](qcombobox.html)::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" state when the popup is open */ [QComboBox](qcombobox.html):!editable:on, [QComboBox](qcombobox.html)::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](qcombobox.html):on { /* shift the text when the popup opens */ padding-top: 3px; padding-left: 4px; } [QComboBox](qcombobox.html)::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; } [QComboBox](qcombobox.html)::down-arrow { image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png); } [QComboBox](qcombobox.html)::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px; } ``` 該的彈出 [QComboBox](qtqss.html#qcombobox) is a [QAbstractItemView](qabstractitemview.html) 并使用后代選擇的樣式： ``` [QComboBox](qcombobox.html) [QAbstractItemView](qabstractitemview.html) { border: 2px solid darkgray; selection-background-color: lightgray; } ``` ### 自定義 QDockWidget 標題欄和的按鈕 [QDockWidget](qdockwidget.html) 可自定義如下： ``` [QDockWidget](qdockwidget.html) { border: 1px solid lightgray; titlebar-close-icon: url(close.png); titlebar-normal-icon: url(undock.png); } [QDockWidget](qdockwidget.html)::title { text-align: left; /* align the text to the left */ background: lightgray; padding-left: 5px; } [QDockWidget](qdockwidget.html)::close-button, [QDockWidget](qdockwidget.html)::float-button { border: 1px solid transparent; background: darkgray; padding: 0px; } [QDockWidget](qdockwidget.html)::close-button:hover, [QDockWidget](qdockwidget.html)::float-button:hover { background: gray; } [QDockWidget](qdockwidget.html)::close-button:pressed, [QDockWidget](qdockwidget.html)::float-button:pressed { padding: 1px -1px -1px 1px; } ``` 如果一個人希望[Dock Widget](qdockwidget.html)部件按鈕移動到左側，下面的樣式表，可以用： ``` [QDockWidget](qdockwidget.html) { border: 1px solid lightgray; titlebar-close-icon: url(close.png); titlebar-normal-icon: url(float.png); } [QDockWidget](qdockwidget.html)::title { text-align: left; background: lightgray; padding-left: 35px; } [QDockWidget](qdockwidget.html)::close-button, [QDockWidget](qdockwidget.html)::float-button { background: darkgray; padding: 0px; icon-size: 14px; /* maximum icon size */ } [QDockWidget](qdockwidget.html)::close-button:hover, [QDockWidget](qdockwidget.html)::float-button:hover { background: gray; } [QDockWidget](qdockwidget.html)::close-button:pressed, [QDockWidget](qdockwidget.html)::float-button:pressed { padding: 1px -1px -1px 1px; } [QDockWidget](qdockwidget.html)::close-button { subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 14px; } [QDockWidget](qdockwidget.html)::float-button { subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 16px; bottom: 0px; width: 14px; } ``` **Note:** 要自定義分離器的（調整句柄） [QDockWidget](qdockwidget.html), 使用的QMainWindow ::分隔符。 ### 自定義 QFrame A [QFrame](qtqss.html#qframe) 是使用樣式 [The Box Model](stylesheet-customizing.html#the-box-model). ``` [QFrame](qframe.html), [QLabel](qlabel.html), [QToolTip](qtooltip.html) { border: 2px solid green; border-radius: 4px; padding: 2px; background-image: url(../img/welcome.png); } ``` ### 自定義 QGroupBox 讓我們看一下移動為例 [QGroupBox](qtqss.html#qgroupbox)'里 的標題為中心。 ``` [QGroupBox](qgroupbox.html) { 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 top for the title */ } [QGroupBox](qgroupbox.html)::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](qtqss.html#qgroupbox), 使用 {#indicator-sub}{indicator} 子控件和風格它酷似一個 [QCheckBox](qcheckbox.html) (i.e) ``` [QGroupBox](qgroupbox.html)::indicator { width: 13px; height: 13px; } [QGroupBox](qgroupbox.html)::indicator:unchecked { image: url(:/../img/checkbox_unchecked.png); } /* proceed with styling just like QCheckBox */ ``` ### 自定義 QHeaderView [QHeaderView](qheaderview.html) 定制如下: ``` [QHeaderView](qheaderview.html)::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; } [QHeaderView](qheaderview.html)::section:checked { background-color: red; } /* style the sort indicator */ [QHeaderView](qheaderview.html)::down-arrow { image: url(down_arrow.png); } [QHeaderView](qheaderview.html)::up-arrow { image: url(up_arrow.png); } ``` ### 自定義 QLineEdit 這個框架 [QLineEdit](qtqss.html#qlineedit) 正在使用的樣式 [The Box Model](stylesheet-customizing.html#the-box-model). 要創建一個圓角線的編輯，我們可以設置： ``` [QLineEdit](qlineedit.html) { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; selection-background-color: darkgray; } ``` 線編輯的密碼字符有 [QLineEdit::Password](qlineedit.html#EchoMode-enum) 回波模式可以使用設置： ``` [QLineEdit](qlineedit.html)[echoMode="2"] { lineedit-password-character: 9679; } ``` 一個只讀的背景 [QLineEdit](qtqss.html#qlineedit) 可被修改如下: ``` [QLineEdit](qlineedit.html):read-only { background: lightblue; ``` ### 自定義 QListView 交替行的背景顏色可以用下面的樣式表進行定制 ``` [QListView](qlistview.html) { alternate-background-color: yellow; } ``` 為了提供當你將鼠標懸停在項的特殊背景下，我們可以使用 [::item](stylesheet-reference.html#item-sub) 子控件。 例如， ``` [QListView](qlistview.html) { show-decoration-selected: 1; /* make the selection span the entire width of the view */ } [QListView](qlistview.html)::item:alternate { background: #EEEEEE; } [QListView](qlistview.html)::item:selected { border: 1px solid #6a6ea9; } [QListView](qlistview.html)::item:selected:!active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ABAFE5, stop: 1 #8588B2); } [QListView](qlistview.html)::item:selected:active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); } [QListView](qlistview.html)::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1); } ``` ### 自定義 QMainWindow 一個分離器的 [QMainWindow](qtqss.html#qmainwindow) 可以樣式如下 ``` [QMainWindow](qmainwindow.html)::separator { background: yellow; width: 10px; /* when vertical */ height: 10px; /* when horizontal */ } [QMainWindow](qmainwindow.html)::separator:hover { background: red; } ``` ### 自定義 QMenu 一個個人項目 [QMenu](qmenu.html) 中使用了'項目'子控件如下樣式： ``` [QMenu](qmenu.html) { background-color: #ABABAB; /* sets background of the menu */ border: 1px solid black; } [QMenu](qmenu.html)::item { /* sets background of menu item. set this to something non-transparent if you want menu color and menu item color to be different */ background-color: transparent; } [QMenu](qmenu.html)::item:selected { /* when user selects item using mouse or keyboard */ background-color: #654321; } ``` 對于更高級的定制，按如下方式使用樣式表： ``` [QMenu](qmenu.html) { background-color: white; margin: 2px; /* some spacing around the menu */ } [QMenu](qmenu.html)::item { padding: 2px 25px 2px 20px; border: 1px solid transparent; /* reserve space for selection border */ } [QMenu](qmenu.html)::item:selected { border-color: darkblue; background: rgba(100, 100, 100, 150); } [QMenu](qmenu.html)::icon:checked { /* appearance of a 'checked' icon */ background: gray; border: 1px inset gray; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } [QMenu](qmenu.html)::separator { height: 2px; background: lightblue; margin-left: 10px; margin-right: 5px; } [QMenu](qmenu.html)::indicator { width: 13px; height: 13px; } /* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */ [QMenu](qmenu.html)::indicator:non-exclusive:unchecked { image: url(:/../img/checkbox_unchecked.png); } [QMenu](qmenu.html)::indicator:non-exclusive:unchecked:selected { image: url(:/../img/checkbox_unchecked_hover.png); } [QMenu](qmenu.html)::indicator:non-exclusive:checked { image: url(:/../img/checkbox_checked.png); } [QMenu](qmenu.html)::indicator:non-exclusive:checked:selected { image: url(:/../img/checkbox_checked_hover.png); } /* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */ [QMenu](qmenu.html)::indicator:exclusive:unchecked { image: url(:/../img/radiobutton_unchecked.png); } [QMenu](qmenu.html)::indicator:exclusive:unchecked:selected { image: url(:/../img/radiobutton_unchecked_hover.png); } [QMenu](qmenu.html)::indicator:exclusive:checked { image: url(:/../img/radiobutton_checked.png); } [QMenu](qmenu.html)::indicator:exclusive:checked:selected { image: url(:/../img/radiobutton_checked_hover.png); } ``` ### 自定義 QMenuBar [QMenuBar](qtqss.html#qmenubar) 的樣式如下： ``` [QMenuBar](qmenubar.html) { background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 lightgray, stop:1 darkgray); } [QMenuBar](qmenubar.html)::item { spacing: 3px; /* spacing between menu bar items */ padding: 1px 4px; background: transparent; border-radius: 4px; } [QMenuBar](qmenubar.html)::item:selected { /* when selected using mouse or keyboard */ background: #a8a8a8; } [QMenuBar](qmenubar.html)::item:pressed { background: #888888; } ``` ### 自定義 QProgressBar 該 [QProgressBar](qtqss.html#qprogressbar)'s [border](stylesheet-reference.html#border-prop), [chunk](stylesheet-reference.html#chunk-sub), 和 [text-align](stylesheet-reference.html#text-align-prop) 可以使用樣式表來定制。 然而，如果一個屬性或副控制被定制，所有其他屬性或子控制也必須定做。  例如，我們改變 [border](stylesheet-reference.html#border-prop) 為灰色和 [chunk](stylesheet-reference.html#chunk-sub) 蔚藍。 ``` [QProgressBar](qprogressbar.html) { border: 2px solid grey; border-radius: 5px; } [QProgressBar](qprogressbar.html)::chunk { background-color: #05B8CC; width: 20px; } ``` 這使得 [text-align](stylesheet-reference.html#text-align-prop), 我們通過定位在進度條的中央的文字定義。 ``` [QProgressBar](qprogressbar.html) { border: 2px solid grey; border-radius: 5px; text-align: center; } ``` 一個 [margin](stylesheet-reference.html#margin-prop) 可以包括獲得更多的可見塊。  在上面的截圖中，我們使用了 [margin](stylesheet-reference.html#margin-prop) 的0.5像素。 ``` [QProgressBar](qprogressbar.html)::chunk { background-color: #CD96CD; width: 10px; margin: 0.5px; } ``` ### 自定義 QPushButton 一個 [QPushButton](qtqss.html#qpushbutton) 的樣式如下： ``` [QPushButton](qpushbutton.html) { border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; } [QPushButton](qpushbutton.html):pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } [QPushButton](qpushbutton.html):flat { border: none; /* no border for a flat push button */ } [QPushButton](qpushbutton.html):default { border-color: navy; /* make the default button prominent */ } ``` 對于 [QPushButton](qtqss.html#qpushbutton) 有菜單，使用 [::menu-indicator](stylesheet-reference.html#menu-indicator-sub) 子控件。 ``` [QPushButton](qpushbutton.html):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](qpushbutton.html)::menu-indicator { image: url(menu_indicator.png); subcontrol-origin: padding; subcontrol-position: bottom right; } [QPushButton](qpushbutton.html)::menu-indicator:pressed, [QPushButton](qpushbutton.html)::menu-indicator:open { position: relative; top: 2px; left: 2px; /* shift the arrow by 2 px */ } ``` 可勾選 [QPushButton](qtqss.html#qpushbutton) 有 [:checked](stylesheet-reference.html#checked-ps) 偽狀態集 ### 自定義 QRadioButton 一個 [QRadioButton](qradiobutton.html) 可以進行轉換 ``` [QRadioButton](qradiobutton.html)::indicator { width: 13px; height: 13px; } [QRadioButton](qradiobutton.html)::indicator::unchecked { image: url(:/../img/radiobutton_unchecked.png); } [QRadioButton](qradiobutton.html)::indicator:unchecked:hover { image: url(:/../img/radiobutton_unchecked_hover.png); } [QRadioButton](qradiobutton.html)::indicator:unchecked:pressed { image: url(:/../img/radiobutton_unchecked_pressed.png); } [QRadioButton](qradiobutton.html)::indicator::checked { image: url(:/../img/radiobutton_checked.png); } [QRadioButton](qradiobutton.html)::indicator:checked:hover { image: url(:/../img/radiobutton_checked_hover.png); } [QRadioButton](qradiobutton.html)::indicator:checked:pressed { image: url(:/../img/radiobutton_checked_pressed.png); } ``` ### 自定義 QScrollBar 該 [QScrollBar](qtqss.html#qscrollbar) 可以使用其子控件等來稱呼 [handle](stylesheet-reference.html#handle-sub), [add-line](stylesheet-reference.html#add-line-sub), [sub-line](stylesheet-reference.html#sub-line-sub), 依此類推。 請注意，如果一個屬性或副控制被定制，所有其他屬性或子控制也必須定做。  滾動條上面已經在風格藍晶了堅實的灰色邊框。 ``` [QScrollBar](qscrollbar.html):horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; } [QScrollBar](qscrollbar.html)::handle:horizontal { background: white; min-width: 20px; } [QScrollBar](qscrollbar.html)::add-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: right; subcontrol-origin: margin; } [QScrollBar](qscrollbar.html)::sub-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: left; subcontrol-origin: margin; } ``` 在 [left-arrow](stylesheet-reference.html#left-arrow-sub) and [right-arrow](stylesheet-reference.html#right-arrow-sub) 有一個白色的背景了堅實的灰色邊框。 作為替代方案，你也可以嵌入一個箭頭的形象。 ``` [QScrollBar](qscrollbar.html):left-arrow:horizontal, [QScrollBar](qscrollbar.html)::right-arrow:horizontal { border: 2px solid grey; width: 3px; height: 3px; background: white; } [QScrollBar](qscrollbar.html)::add-page:horizontal, [QScrollBar](qscrollbar.html)::sub-page:horizontal { background: none; } ``` 如果你想在滾動條的滾動按鈕被放置在一起（而不是邊緣），如Mac OS X上，你可以使用下面的樣式表： ``` [QScrollBar](qscrollbar.html):horizontal { border: 2px solid green; background: cyan; height: 15px; margin: 0px 40px 0 0px; } [QScrollBar](qscrollbar.html)::handle:horizontal { background: gray; min-width: 20px; } [QScrollBar](qscrollbar.html)::add-line:horizontal { background: blue; width: 16px; subcontrol-position: right; subcontrol-origin: margin; border: 2px solid black; } [QScrollBar](qscrollbar.html)::sub-line:horizontal { background: magenta; width: 16px; subcontrol-position: top right; subcontrol-origin: margin; border: 2px solid black; position: absolute; right: 20px; } [QScrollBar](qscrollbar.html):left-arrow:horizontal, [QScrollBar](qscrollbar.html)::right-arrow:horizontal { width: 3px; height: 3px; background: pink; } [QScrollBar](qscrollbar.html)::add-page:horizontal, [QScrollBar](qscrollbar.html)::sub-page:horizontal { background: none; } ``` 使用上述樣式表的滾動條是這樣的：  要自定義垂直滾動條使用類似如下的樣式表： ``` [QScrollBar](qscrollbar.html):vertical { border: 2px solid grey; background: #32CC99; width: 15px; margin: 22px 0 22px 0; } [QScrollBar](qscrollbar.html)::handle:vertical { background: white; min-height: 20px; } [QScrollBar](qscrollbar.html)::add-line:vertical { border: 2px solid grey; background: #32CC99; height: 20px; subcontrol-position: bottom; subcontrol-origin: margin; } [QScrollBar](qscrollbar.html)::sub-line:vertical { border: 2px solid grey; background: #32CC99; height: 20px; subcontrol-position: top; subcontrol-origin: margin; } [QScrollBar](qscrollbar.html)::up-arrow:vertical, [QScrollBar](qscrollbar.html)::down-arrow:vertical { border: 2px solid grey; width: 3px; height: 3px; background: white; } [QScrollBar](qscrollbar.html)::add-page:vertical, [QScrollBar](qscrollbar.html)::sub-page:vertical { background: none; } ``` ### 自定義 QSizeGrip [QSizeGrip](qsizegrip.html) 常是由剛剛設置的圖像風格。 ``` [QSizeGrip](qsizegrip.html) { image: url(:/../img/sizegrip.png); width: 16px; height: 16px; } ``` ### 自定義 QSlider 你可以樣式水平滑塊如下： ``` [QSlider](qslider.html)::groove:horizontal { border: 1px solid #999999; height: 8px; /* the groove expands to the size 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](qslider.html)::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 by default on the contents rect of the groove. Expand outside the groove */ border-radius: 3px; } ``` 如果你想把手前后改變滑塊部分的顏色，可以使用加載頁面和子頁面子控件。 例如，對于一個垂直滑塊： ``` [QSlider](qslider.html)::groove:vertical { background: red; position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */ left: 4px; right: 4px; } [QSlider](qslider.html)::handle:vertical { height: 10px; background: green; margin: 0 -4px; /* expand outside the groove */ } [QSlider](qslider.html)::add-page:vertical { background: white; } [QSlider](qslider.html)::sub-page:vertical { background: pink; } ``` ### 自定義 QSpinBox [QSpinBox](qtqss.html#qspinbox) 可完全自定義如下（樣式表有評論在線）： ``` [QSpinBox](qspinbox.html) { padding-right: 15px; /* make room for the arrows */ border-image: url(:/../img/frame.png) 4; border-width: 3; } [QSpinBox](qspinbox.html)::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(:/../img/spinup.png) 1; border-width: 1px; } [QSpinBox](qspinbox.html)::up-button:hover { border-image: url(:/../img/spinup_hover.png) 1; } [QSpinBox](qspinbox.html)::up-button:pressed { border-image: url(:/../img/spinup_pressed.png) 1; } [QSpinBox](qspinbox.html)::up-arrow { image: url(:/../img/up_arrow.png); width: 7px; height: 7px; } [QSpinBox](qspinbox.html)::up-arrow:disabled, [QSpinBox](qspinbox.html)::up-arrow:off { /* off state when value is max */ image: url(:/../img/up_arrow_disabled.png); } [QSpinBox](qspinbox.html)::down-button { subcontrol-origin: border; subcontrol-position: bottom right; /* position at bottom right corner */ width: 16px; border-image: url(:/../img/spindown.png) 1; border-width: 1px; border-top-width: 0; } [QSpinBox](qspinbox.html)::down-button:hover { border-image: url(:/../img/spindown_hover.png) 1; } [QSpinBox](qspinbox.html)::down-button:pressed { border-image: url(:/../img/spindown_pressed.png) 1; } [QSpinBox](qspinbox.html)::down-arrow { image: url(:/../img/down_arrow.png); width: 7px; height: 7px; } [QSpinBox](qspinbox.html)::down-arrow:disabled, [QSpinBox](qspinbox.html)::down-arrow:off { /* off state when value in min */ image: url(:/../img/down_arrow_disabled.png); } ``` ### 自定義 QSplitter 一個 [QSplitter](qtqss.html#qsplitter) 從派生 [QFrame](qtqss.html#qframe) 和因此可以樣式像 [QFrame](qtqss.html#qframe). 把手或句柄使用定制 [::handle](stylesheet-reference.html#handle-sub) 子控件. ``` [QSplitter](qsplitter.html)::handle { image: url(../img/splitter.png); } [QSplitter](qsplitter.html)::handle:horizontal { width: 2px; } [QSplitter](qsplitter.html)::handle:vertical { height: 2px; } [QSplitter](qsplitter.html)::handle:pressed { image: url(../img/splitter_pressed.png); } ``` ### 自定義 QStatusBar 我們可以提供狀態欄的背景和狀態欄里面的物品邊框，如下所示： ``` [QStatusBar](qstatusbar.html) { background: brown; } [QStatusBar](qstatusbar.html)::item { border: 1px solid red; border-radius: 3px; } ``` 需要注意的是已被添加到窗口小部件 [QStatusBar](qstatusbar.html) 可以使用后代聲明的樣式（即） ``` [QStatusBar](qstatusbar.html) [QLabel](qlabel.html) { border: 3px solid white; } ``` ### 自定義 QTabWidget and QTabBar  對于上面的截圖中，我們需要一個樣式表如下： ``` [QTabWidget](qtabwidget.html)::pane { /* The tab widget frame */ border-top: 2px solid #C2C7CB; } [QTabWidget](qtabwidget.html)::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](qtabbar.html)::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](qtabbar.html)::tab:selected, [QTabBar](qtabbar.html)::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](qtabbar.html)::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ } [QTabBar](qtabbar.html)::tab:!selected { margin-top: 2px; /* make non-selected tabs look smaller */ } ``` 通常情況下，我們需要的標簽重疊的樣子如下：  對于一個標簽控件，看起來像上述情況，我們利用 [negative margins](http://www.communitymx.com/content/article.cfm?cid=B0029). 由此產生的樣式表如下： ``` [QTabWidget](qtabwidget.html)::pane { /* The tab widget frame */ border-top: 2px solid #C2C7CB; } [QTabWidget](qtabwidget.html)::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](qtabbar.html)::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](qtabbar.html)::tab:selected, [QTabBar](qtabbar.html)::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](qtabbar.html)::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ } [QTabBar](qtabbar.html)::tab:!selected { margin-top: 2px; /* make non-selected tabs look smaller */ } /* make use of negative margins for overlapping tabs */ [QTabBar](qtabbar.html)::tab:selected { /* expand/overlap to the left and right by 4px */ margin-left: -4px; margin-right: -4px; } [QTabBar](qtabbar.html)::tab:first:selected { margin-left: 0; /* the first selected tab has nothing to overlap with on the left */ } [QTabBar](qtabbar.html)::tab:last:selected { margin-right: 0; /* the last selected tab has nothing to overlap with on the right */ } [QTabBar](qtabbar.html)::tab:only-one { margin: 0; /* if there is only one tab, we don't want overlapping margins */ } ``` 若要將標簽欄中心（如下），我們需要以下樣式表：  ``` [QTabWidget](qtabwidget.html)::pane { /* The tab widget frame */ border-top: 2px solid #C2C7CB; position: absolute; top: -0.5em; } [QTabWidget](qtabwidget.html)::tab-bar { alignment: center; } /* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */ [QTabBar](qtabbar.html)::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](qtabbar.html)::tab:selected, [QTabBar](qtabbar.html)::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](qtabbar.html)::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* same as pane color */ } ``` 撕裂指示燈和滾動按鈕可以進一步自定義如下： ``` [QTabBar](qtabbar.html)::tear { image: url(tear_indicator.png); } [QTabBar](qtabbar.html)::scroller { /* the width of the scroll buttons */ width: 20px; } [QTabBar](qtabbar.html) [QToolButton](qtoolbutton.html) { /* the scroll buttons are tool buttons */ border-image: url(scrollbutton.png) 2; border-width: 2px; } [QTabBar](qtabbar.html) [QToolButton](qtoolbutton.html)::right-arrow { /* the arrow mark in the tool buttons */ image: url(rightarrow.png); } [QTabBar](qtabbar.html) [QToolButton](qtoolbutton.html)::left-arrow { image: url(leftarrow.png); } ``` Qt的4.6的關閉按鈕可以自定義如下： ``` [QTabBar](qtabbar.html)::close-button { image: url(close.png) subcontrol-position: left; } [QTabBar](qtabbar.html)::close-button:hover { image: url(close-hover.png) } ``` ### 自定義 QTableView 假設我們想在我們選擇的項目 [QTableView](qtableview.html) 中有泡泡糖粉紅色褪色成白色為背景  這是可能的 [selection-background-color](stylesheet-reference.html#selection-background-color-prop) 屬性和所需的語法是： ``` [QTableView](qtableview.html) { selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5, stop: 0 #FF92BB, stop: 1 white); } ``` 轉角小部件可以使用下面的樣式表來定制 ``` [QTableView](qtableview.html) QTableCornerButton::section { background: red; border: 2px outset red; } ``` ### 自定義 QToolBar 背景和一個句柄 [QToolBar](qtqss.html#qtoolbar) 定制如下: ``` [QToolBar](qtoolbar.html) { background: red; spacing: 3px; /* spacing between items in the tool bar */ } [QToolBar](qtoolbar.html)::handle { image: url(handle.png); } ``` ### 自定義 QToolBox 標簽 [QToolBox](qtoolbox.html) 正在使用的'標簽'子控件定制 ``` [QToolBox](qtoolbox.html)::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](qtoolbox.html)::tab:selected { /* italicize selected tabs */ font: italic; color: white; } ``` ### 自定義 QToolButton 有三種類型的QToolButtons * 該 [QToolButton](qtqss.html#qtoolbutton) 沒有菜單。在這種情況下 [QToolButton](qtqss.html#qtoolbutton) 是風格酷似 [QPushButton](qtqss.html#qpushbutton). 見[自定義 QPushButton](qtqss.html #customizing-qpushbutton) 的一個例子。 * 該 [QToolButton](qtqss.html#qtoolbutton) 擁有一個菜單，并具有 [QToolButton::popupMode](qtoolbutton.html#popupMode-prop) 設置為 [QToolButton::DelayedPopup](qtoolbutton.html#ToolButtonPopupMode-enum) 或者 [QToolButton::InstantPopup](qtoolbutton.html#ToolButtonPopupMode-enum). 在這種情況下 該 [QToolButton](qtqss.html#qtoolbutton) 是風格酷似 [QPushButton](qtqss.html#qpushbutton) 用的菜單。見 [自定義 QPushButton](qtqss.html #customizing-qpushbutton) 為菜單指示器偽狀態的使用的一個例子。 * 該 [QToolButton](qtqss.html#qtoolbutton) 擁有 [QToolButton::popupMode](qtoolbutton.html#popupMode-prop) 設置 [QToolButton::MenuButtonPopup](qtoolbutton.html#ToolButtonPopupMode-enum).在這種情況下，我們的樣式，如下所示： ``` [QToolButton](qtoolbutton.html) { /* 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](qtoolbutton.html)[popupMode="1"] { /* only for MenuButtonPopup */ padding-right: 20px; /* make way for the popup button */ } [QToolButton](qtoolbutton.html):pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } /* the subcontrols below are used only in the MenuButtonPopup mode */ [QToolButton](qtoolbutton.html)::menu-button { border: 2px solid gray; border-top-right-radius: 6px; border-bottom-right-radius: 6px; /* 16px width + 4px for border = 20px allocated above */ width: 16px; } [QToolButton](qtoolbutton.html)::menu-arrow { image: url(downarrow.png); } [QToolButton](qtoolbutton.html)::menu-arrow:open { top: 1px; left: 1px; /* shift it a bit */ } ``` ### 自定義 QToolTip [QToolTip](qtqss.html#qtooltip) 定制酷似的 [QLabel](qtqss.html#qlabel). 此外，用于支持它的平臺上，不透明度屬性可以被設置為調整不透明度 例如， ``` [QToolTip](qtooltip.html) { border: 2px solid darkkhaki; padding: 5px; border-radius: 3px; opacity: 200; } ``` ### 自定義 QTreeView 交替行的背景顏色可以用下面的樣式表進行定制： ``` [QTreeView](qtreeview.html) { alternate-background-color: yellow; } ``` 為了提供當你將鼠標懸停在項的特殊背景下，我們可以使用 [::item](stylesheet-reference.html#item-sub) 子控件。例如， ``` [QTreeView](qtreeview.html) { show-decoration-selected: 1; } [QTreeView](qtreeview.html)::item { border: 1px solid #d9d9d9; border-top-color: transparent; border-bottom-color: transparent; } [QTreeView](qtreeview.html)::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1); border: 1px solid #bfcde4; } [QTreeView](qtreeview.html)::item:selected { border: 1px solid #567dbc; } [QTreeView](qtreeview.html)::item:selected:active{ background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); } [QTreeView](qtreeview.html)::item:selected:!active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf); } ``` 一的分支 [QTreeView](qtreeview.html) 則使用風格 [::branch](stylesheet-reference.html#branch-sub) 子控件。繪圖分支時，以下樣式表顏色代碼的各種狀態。 ``` [QTreeView](qtreeview.html)::branch { background: palette(base); } [QTreeView](qtreeview.html)::branch:has-siblings:!adjoins-item { background: cyan; } [QTreeView](qtreeview.html)::branch:has-siblings:adjoins-item { background: red; } [QTreeView](qtreeview.html)::branch:!has-children:!has-siblings:adjoins-item { background: blue; } [QTreeView](qtreeview.html)::branch:closed:has-children:has-siblings { background: pink; } [QTreeView](qtreeview.html)::branch:has-children:!has-siblings:closed { background: gray; } [QTreeView](qtreeview.html)::branch:open:has-children:has-siblings { background: magenta; } [QTreeView](qtreeview.html)::branch:open:has-children:!has-siblings { background: green; } ``` 豐富多彩的，雖然它是一個更有用的例子，可以用下面的圖像進行： |  |  |  |  |  | | vline.png | branch-more.png | branch-end.png | branch-closed.png | branch-open.png | ``` [QTreeView](qtreeview.html)::branch:has-siblings:!adjoins-item { border-image: url(vline.png) 0; } [QTreeView](qtreeview.html)::branch:has-siblings:adjoins-item { border-image: url(branch-more.png) 0; } [QTreeView](qtreeview.html)::branch:!has-children:!has-siblings:adjoins-item { border-image: url(branch-end.png) 0; } [QTreeView](qtreeview.html)::branch:has-children:!has-siblings:closed, [QTreeView](qtreeview.html)::branch:closed:has-children:has-siblings { border-image: none; image: url(branch-closed.png); } [QTreeView](qtreeview.html)::branch:open:has-children:!has-siblings, [QTreeView](qtreeview.html)::branch:open:has-children:has-siblings { border-image: none; image: url(branch-open.png); } ``` 結果樹視圖看起來是這樣的：  ## 常見錯誤 使用樣式表時，本節列出一些常見的錯誤 ### QPushButton and images 當造型一個 [QPushButton](qtqss.html#qpushbutton), 通常希望使用圖像作為按鈕圖形。這是常見的嘗試 [background-image](stylesheet-reference.html#background-image-prop) 屬性，但這有許多缺點：例如，背景會經常出現隱藏按鈕裝飾后面，因為它不被認為是背景。此外，如果按鈕的大小時，整個背景會被拉伸或平鋪，這并不總是不好看。 這是更好地利用 [border-image](stylesheet-reference.html#border-image-prop) 財產，因為它總是會顯示圖像，無論背景（你可以，如果它有它的alpha值與背景結合起來），它具有特殊的設置來處理按鈕大小調整。 考慮下面的代碼片段: ``` [QPushButton](qpushbutton.html) { color: grey; border-image: url(/home/kamlie/code/button.png) 3 10 3 10; border-top: 3px transparent; border-bottom: 3px transparent; border-right: 10px transparent; border-left: 10px transparent; } ``` 這將產生一個按鈕，看起來像這樣：  在URL后的數字分別賦予像素的上，右，下和左數。這些數字對應的邊界，不應該當伸展大小的變化。無論何時調整按鈕，圖像的中間部分將在兩個方向上拉伸，而在樣式表中不會指定的像素。這使得該按鈕的邊框看起來更自然，就像這樣： |  | | 圓形邊界 | |  | | 無邊界 | **另請參見** [Style Sheet Example](qt-widgets-stylesheet-example.html), [Supported HTML Subset](richtext-html-subset.html), and [QStyle](qtqss.html#qstyle). [Qt Style Sheets Reference](stylesheet-reference.html) Qt的樣式表參考 <footer id="footerbar"> <nav class="footer-nav clearfix"></nav> * [Qt Merchandise](http://www.cafepress.com/theqtcompany) * [Sign In](https://account.qt.io/login "Sign into your account.") * [Feedback](mailto:feedback@theqtcompany.com?Subject=Feedback%20about%20doc.qt.io%20site) * [? 2016 The Qt Company](http://qt.io/about-us/) </footer> | | |