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 范例。

The spacing 特性指定复选指示器和文本之间的间距。

见 定制 QCheckBox 范例。

警告： 确保定义 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 分别。

占位符文本的颜色的设置可用使用 placeholder-text-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 范例。

从 5.15 起， icon 特性可以设置以覆写按钮图标。

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 constraints 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 分别。

占位符文本的颜色的设置可用使用 placeholder-text-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.initFrom(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 }

The icon that is used, for widgets that have an icon.

The only widget currently supporting this property is QPushButton .

注意： It's the application's responsibility to assign an icon to a button (using the QAbstractButton API), and not the style's. So be careful setting it unless your stylesheet is targeting a specific application.

从 5.15 起可用。

The image that is drawn in the contents rectangle of a subcontrol.

The image property accepts a list of Url s or an svg . The actual image that is drawn is determined using the same algorithm as QIcon (i.e) the image is never scaled up but always scaled down if necessary. If a svg is specified, the image is scaled to the size of the contents rectangle.

Setting the image property on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).

In Qt 4.3 and later, the alignment of the image within the rectangle can be specified using image-position .

This property is for subcontrols only–we don't support it for other elements.

警告： The QIcon SVG plugin is needed to render SVG images.

范例：

// implicitly sets the size of down-button to the
// size of spindown.png
QSpinBox::down-button { image: url(:/images/spindown.png) }

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

若此特性未指定，默认为 0 .

范例：

QSpinBox::down-button { left: 2px }

另请参阅 right , top ，和 bottom .

若此特性未指定，默认为当前样式指定值对于 SH_LineEdit_PasswordMaskDelay 样式提示。

This property was added in Qt 5.4.

范例：

* { lineedit-password-mask-delay: 1000 }

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 模型 .

范例：

QSpinBox { max-height: 24px }

另请参阅 max-width .

若此特性未指定，默认为当前样式指定值对于 SH_MessageBox_TextInteractionFlags 样式提示。

范例：

QMessageBox { messagebox-text-interaction-flags: 5 }

Widget 或子控件的最小宽度。

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

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

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

范例：

QComboBox { min-width: 72px }

注意： Setting this property might allow widgets to shrink smaller than the space required for the contents.

另请参阅 min-height .

若此特性未指定，默认为 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, 100%, 100%) }      /* opaque yellow */
QLabel { border-color: hsva(240, 255, 255, 75%) } /* 75% blue */
QLabel { border-color: hsl(60, 100%, 50%) }       /* opaque yellow */
QLabel { border-color: hsla(240, 255, 50%, 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.