Qt 樣式錶參考

所有衍生的 QAbstractScrollArea ，包括 QTextEdit ，和 QAbstractItemView (所有項視圖類)，支持可捲動背景使用 background-attachment . Setting the background-attachment to fixed provides a background-image that does not scroll with the viewport. Setting the background-attachment to scroll , scrolls the background-image when the scroll bars move.

見 定製 QAbstractScrollArea 範例。

警告： 確保定義 Q_OBJECT 宏為自定義 Widget。

Supports styling of the title bar and the title bar buttons when docked.

The dock widget border can be styled using the border property. The ::title subcontrol can be used to customize the title bar. The close and float buttons are positioned with respect to the ::title subcontrol using the ::close-button and ::float-button 分彆。

When the title bar is vertical, the :vertical pseudo class is set. In addition, depending on QDockWidget::DockWidgetFeature ， :closable , :floatable and :movable pseudo states are set.

注意： 使用 QMainWindow::separator 以樣式化重置手柄大小。

警告： 樣式錶不起作用當 QDockWidget is undocked as Qt uses native top level windows when undocked.

見 定製 QDockWidget 範例。

從 4.3 起，設置樣式錶在 QLabel 自動設置 QFrame::frameStyle 特性到 QFrame::StyledPanel .

見 定製 QFrame 範例。

The sort indicator can be styled using the ::up-arrow 和 ::down-arrow 子控件。

見 定製 QHeaderView 範例。

樣式化選中項的顔色和背景是使用 selection-color and selection-background-color 分彆。

The password character can be styled using the lineedit-password-character 特性。

The password mask delay can be changed using the lineedit-password-mask-delay

見 定製 QLineEdit 範例。

Individual items are styled using the ::item subcontrol. In addition to the usually supported pseudo states, item 子控件支持 :selected , :default , :exclusive 和 non-exclusive 僞狀態。

The indicator of checkable menu items is styled using the ::indicator 子控件。

The separator is styled using the ::separator 子控件。

For items with a sub menu, the arrow marks are styled using the right-arrow and left-arrow .

The scroller is styled using the ::scroller .

The tear-off is styled using the ::tearoff .

見 定製 QMenu 範例。

For QPushButton with a menu, the menu indicator is styled using the ::menu-indicator subcontrol. Appearance of checkable push buttons can be customized using the :open and :closed pseudo-states.

警告： If you only set a background-color on a QPushButton , the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color. For example,

QPushButton { background-color: red; border: none; }
									

見 定製 QPushButton 範例。

The slider can be styled using the ::handle subcontrol. Setting the min-width or min-height provides size contraints for the slider depending on the orientation.

The ::add-line subcontrol can be used to style the button to add a line. By default, the add-line subcontrol is placed in top right corner of the Border rectangle of the widget. Depending on the orientation the ::right-arrow or ::down-arrow . By default, the arrows are placed in the center of the Contents rectangle of the add-line subcontrol.

The ::sub-line subcontrol can be used to style the button to subtract a line. By default, the sub-line subcontrol is placed in bottom right corner of the Border rectangle of the widget. Depending on the orientation the ::left-arrow or ::up-arrow . By default, the arrows are placed in the center of the Contents rectangle of the sub-line subcontrol.

The ::sub-page subcontrol can be used to style the region of the slider that subtracts a page. The ::add-page subcontrol can be used to style the region of the slider that adds a page.

見 定製 QScrollBar 範例。

The groove of the slider is styled using the ::groove . The groove is positioned by default in the Contents rectangle of the widget. The thumb of the slider is styled using ::handle subcontrol. The subcontrol moves in the Contents rectangle of the groove subcontrol.

見 定製 QSlider 範例。

見 定製 QSplitter 範例。

The :top , :left , :right , :bottom 僞狀態從屬選項卡取嚮。

selected 狀態重疊選項卡的創建可以使用負邊距或使用 absolute 位置方案。

撕裂指示器對於 QTabBar 的樣式化是使用 ::tear 子控件。

QTabBar 使用兩 QToolButton 的滾動器的樣式化可以使用 QTabBar QToolButton 選擇器。捲動按鈕寬度的指定是使用 ::scroller 子控件。

選項卡的對齊方式在 QTabBar 的樣式化是使用 alignment 特性。

警告：

要改變位置對於 QTabBar 在 QTabWidget ，使用 tab-bar 子控件 (並設置 subcontrol-position)。

見 Customizing QTabBar 範例。

樣式化選中項的顔色和背景是使用 selection-color and selection-background-color 分彆。

角落 Widget 在 QTableView 的實現如 QAbstractButton 且樣式化可以使用 QTableView QTableCornerButton::section 選擇器。

警告： 若僅設置 QTableCornerButton 背景色，背景可能不齣現，除非將 border (邊框) 特性設為某值。這是因為，默認情況下，QTableCornerButton 會繪製完全重疊背景色的本機邊框。

柵格顔色的指定可以使用 gridline-color 特性。

見 QAbsractScrollArea 以樣式化可捲動背景。

見 定製 QTableView 範例。

選中文本的顔色和背景的樣式化是使用 selection-color and selection-background-color 分彆。

見 QAbsractScrollArea 以樣式化可捲動背景。

The :top , :left , :right , :bottom pseudo states depending on the area in which the tool bar is grouped.

The :first , :last , :middle , :only-one pseudo states indicator the position of the tool bar within a line group (See QStyleOptionToolBar::positionWithinLine ).

分隔符對於 QToolBar 的樣式化是使用 ::separator 子控件。

(移動工具欄的) 手柄的樣式化是使用 ::handle 子控件。

見 定製 QToolBar 範例。

The individual tabs can by styled using the ::tab subcontrol. The tabs support the :only-one , :first , :last , :middle , :previous-selected , :next-selected , :selected 僞狀態。

樣式化選中項的顔色和背景是使用 selection-color and selection-background-color 分彆。

選定行為的控製是通過 show-decoration-selected 特性。

The branches of the tree view can be styled using the ::branch subcontrol. The ::branch Sub-control supports the :open , :closed , :has-sibling and :has-children 僞狀態。

使用 ::item subcontrol for more fine grained control over the items in the QTreeView .

見 QAbsractScrollArea 以樣式化可捲動背景。

見 定製 QTreeView for an example to style the branches.

若子類來自 QWidget ，需要提供 paintEvent 為自定義 QWidget 如下：

void CustomWidget::paintEvent(QPaintEvent *)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
									

以上代碼無操作，若未設置樣式錶。

警告： 確保定義 Q_OBJECT 宏為自定義 Widget。

若此特性未設置，將默認值設為調色闆的 AlternateBase 角色。

範例：

QTreeView {
    alternate-background-color: blue;
    background: yellow;
}
									

另請參閱 background and selection-background-color .

用於 Widget 的背景色。

範例：

QLabel { background-color: yellow }
QLineEdit { background-color: rgb(255, 0, 0) }
										

If this property is not specified, the background image is repeated in both directions ( repeat ).

範例：

QFrame {
    background: white url(:/images/ring.png);
    background-repeat: repeat-y;
    background-position: left;
}
								

範例：

QTextEdit {
    background-image: url("leaves.png");
    background-attachment: fixed;
}
						

另請參閱 background

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QDialog , QFrame , QGroupBox , QLabel , QPushButton , QRadioButton , QSplitter , QTextEdit , QToolTip ，和純 QWidget 。

若此特性未指定，默認為 padding .

範例：

QFrame {
    background-image: url(:/images/header.png);
    background-position: top left;
    background-origin: content;
}
						

另請參閱 background and Box 模型 .

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSplitter , QTextEdit , QToolTip ，和純 QWidget 。

若此特性未指定，默認為 color (i.e., the widget's foreground color).

範例：

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-color: white;
}
					

另請參閱 border-style , border-width , border-image ，和 Box 模型 .

The border-radius clips the element's background .

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSplitter , QTextEdit ，和 QToolTip .

If this property is not specified, it defaults to 0.

範例：

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}
					

另請參閱 border-width and Box 模型 .

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSplitter , QTextEdit ，和 QToolTip .

範例：

QLineEdit {
    border-width: 2px;
    border-style: solid;
    border-color: darkblue;
}
						

另請參閱 border-color , border-radius , border-style , border-image ，和 Box 模型 .

若此特性未指定，默認為當前樣式指定值對於 SH_DialogButtonLayout 樣式提示。

範例：

* { button-layout: 2 }
						

If this property is set to 1, the buttons of a QDialogButtonBox show icons; if it is set to 0, the icons are not shown.

見 圖標列錶 section for information on how to set icons.

QDialogButtonBox { dialogbuttonbox-buttons-have-icons: 1; }
							

注意： Styles defining this property must be applied before the QDialogButtonBox is created; this means that you must apply the style to the parent widget or to the application itself.

字體係列。

範例：

QCheckBox { font-family: "New Century Schoolbook" }
							

字體樣式。

範例：

QTextEdit { font-style: italic }
							

若此特性未指定，默認為當前樣式指定值對於 SH_Table_GridLineColor 樣式提示。

範例：

* { gridline-color: gray }
						

Widget 圖標的寬度和高度。

使用此特性，可以設置下列 Widget 的圖標大小。

• QCheckBox
• QListView
• QPushButton
• QRadioButton
• QTabBar
• QToolBar
• QToolBox
• QTreeView

若此特性未指定，默認為當前樣式指定值對於 SH_LineEdit_PasswordCharacter 樣式提示。

範例：

* { lineedit-password-character: 9679 }
						

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSplitter , QTextEdit ，和 QToolTip .

若此特性未指定，默認為 0 .

範例：

QLineEdit { margin: 2px }
				

另請參閱 padding , spacing ，和 Box 模型 .

Widget 或子控件的最大寬度。

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSizeGrip , QSpinBox , QSplitter , QStatusBar , QTextEdit ，和 QToolTip .

The value is relative to the contents rect in the Box 模型 .

範例：

QComboBox { max-width: 72px }
						

另請參閱 max-height .

Widget 或子控件的最小高度。

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSizeGrip , QSpinBox , QSplitter , QStatusBar , QTextEdit ，和 QToolTip .

If this property is not specified, the minimum height is derived based on the widget's contents and the style.

The value is relative to the contents rect in the Box 模型 .

範例：

QComboBox { min-height: 24px }
						

另請參閱 min-width .

若此特性未指定，默認為當前樣式指定值對於 SH_ToolTipLabel_Opacity 樣式提示。

範例：

QToolTip { opacity: 223 }
							

此特性的支持通過 QAbstractItemView 子類， QAbstractSpinBox 子類， QCheckBox , QComboBox , QFrame , QGroupBox , QLabel , QLineEdit , QMenu , QMenuBar , QPushButton , QRadioButton , QSplitter , QTextEdit ，和 QToolTip .

若此特性未指定，默認為 0 .

範例：

QLineEdit { padding: 3px }
						

另請參閱 margin , spacing ，和 Box 模型 .

若此特性未指定，默認為 relative .

選中文本 (或項) 的背景。

This property is supported by all widgets that respect the QWidget::palette and that show selection text.

若此特性未設置，將默認值設為調色闆的 Highlight 角色。

範例：

QTextEdit { selection-background-color: darkblue }
							

另請參閱 selection-color and background .

若此特性未指定，默認為當前樣式指定值對於 SH_ItemView_ShowDecorationSelected 樣式提示。

範例：

* { show-decoration-selected: 1 }
								

The origin rectangle of the subcontrol within the parent element.

若此特性未指定，默認為 padding .

範例：

QSpinBox::up-button {
    image: url(:/images/spinup.png);
    subcontrol-origin: content;
    subcontrol-position: right top;
}
									

另請參閱 subcontrol-position .

The alignment of text and icon within the contents of the widget.

If this value is not specified, it defaults to the value that depends on the native style.

範例：

QPushButton {
    text-align: left;
}
										

此特性目前僅支持通過 QPushButton and QProgressBar .

若 position is absolute ， top property specifies the subcontrol's top edge in relation to the parent's top edge (see also subcontrol-origin ).

若此特性未指定，默認為 0 .

範例：

QSpinBox::up-button { top: 2px }
										

另請參閱 left , right ，和 bottom .

水平和/或垂直對齊。

範例：

QTextEdit { background-position: bottom center }
												

範例：

QLabel { border-width: 1px }                    /* 1px 1px 1px 1px */
QLabel { border-width: 1px 2px }                /* 1px 2px 1px 2px */
QLabel { border-width: 1px 2px 3px }            /* 1px 2px 3px 2px */
QLabel { border-width: 1px 2px 3px 4px }        /* 1px 2px 3px 4px */
										

範例：

QLabel { border-color: red }                    /* opaque red */
QLabel { border-color: #FF0000 }                /* opaque red */
QLabel { border-color: rgba(255, 0, 0, 75%) }   /* 75% opaque red */
QLabel { border-color: rgb(255, 0, 0) }         /* opaque red */
QLabel { border-color: rgb(100%, 0%, 0%) }      /* opaque red */
QLabel { border-color: hsv(60, 255, 255) }      /* opaque yellow */
QLabel { border-color: hsva(240, 255, 255, 75%) }      /* 75% blue */
									

注意： The RGB colors allowed are the same as those allowed with CSS 2.1, as listed here .

範例：

* {
    file-icon: url(file.png),
               url(file_selected.png) selected;
  }
QMessageBox {
    dialogbuttonbox-buttons-have-icons: true;
    dialog-ok-icon: url(ok.svg);
    dialog-cancel-icon: url(cancel.png),
                        url(grayed_cancel.png) disabled;
}
									

例如，

QPushButton { color: palette(dark); }
										

• repeat-x : Repeat horizontally.
• repeat-y : Repeat vertically.
• repeat : Repeat horizontally and vertically.
• no-repeat : Don't repeat.