Qt Style Sheet语法解析

Qt Style Sheet语法解析

1、概述

正如web前端开发中CSS(Cascade Style Sheet)的作用一样，Qt开发中也可通过Qt Style Sheet实现UI界面与业务逻辑的彻底分离。除了Qt自身增加了一些属性之外，Qt Style Sheet语法与CSS类似。

Qt Style Sheet由一系列样式表(Style Sheet)组成。一个样式表包括：选择器和声明，如下：

QPushButton{color:white;border:1px solid red}

其中：

QPushButton为选择器，表示选择QPushButton及其子类的类对象； {color:white;border:1px solid red}为声明，声明位于{}内，由一系列属性:值对组成，属性:值对之间用;隔开。

2、选择器(selector)

选择器分为很多类型，上述示例中为最简单的类型选择器(type selector)，表示选择指定类及其子类对象。选择器之间可用逗号隔开，表示匹配多个选择器，如下：

QPushButton, QLineEdit, QComboBox { color: red }

它等价于：

QPushButton { color: red } QLineEdit { color: red }

QComboBox { color: red }

选择器各类型如下表： 选择器类型 通用选择器(Universal Selector) 类型选择器(type selector) QPushButton * 匹配所有类 示例 说明 匹配QPushButton类及其子类，这也是最常用的选择器 匹配falt属性值为false的QPushButton类及其子类。 所有支持QVariant::toString()的属性类型都被属性选择器支持。注意属属性选择器性选择器的值类型只能为字符串。 (Property QPushButton[flat=\"false\"] 属性与之间除了可以用=连接外，还Selector) 可以用~=连接。~=用于测试类型为QStringList的属性是否包含给定的值。 另外属性选择器还支持动态属性，可参见Qt官方文档。 类选择器 .QPushButton 匹配QPushButton类，但不包括其 (Class Selector) ID选择器 (ID Selector) 子类。相当于： *[class~=\"QPushButton\"] 匹配ObjectName为okButton的QPushButton类及其子类 匹配为QDialog类对象的后裔（子对象、孙子对象...）的QPushButton类及其子类。 注意QPushButton在后面！！！ 匹配为QDialog类对象的直接子对QDialog > QPushButton 象的QPushButton类及其子类。 注意QPushButton在后面！！！ QPushButton#okButton 后裔选择器 (Descendant QDialog QPushButton Selector) 子对象选择器(Child Selector)

3、子控件(sub control)

对于结构复杂的widget控件，Qt Style Sheet支持通过子控件(sub control)来定义其子控件的样式。选择器可以用子控件(sub control)来修饰，以样式表的声明值作用于widget控件的子控件，如下：

QComboBox::drop-down { image: url(dropdown.png) }

上述示例用于下拉框下拉按钮子控件的样式定义，通过::连接选择器和子控件。::不免让人联想起CSS的伪元素，但Qt Style Sheet的子控件与CSS伪元素不同。子控件不具备级联语义（Qt Style Sheet中没有子控件的子控件一说）。

子控件总是相对于widget控件或另一个子控件进行原点定位，且各子控件都有默认的定位方式。比如上述示例的::drop-down子控件默认相对于QComboBox的padding框右上角进行原点定位。要改变子控件默认原点定位方式可通过subcontrol-origin属性实现，如下：

QComboBox { margin-right: 20px; }

QComboBox::drop-down { subcontrol-origin: margin; subcontrol-position:top right; }

上述示例将下拉框下拉按钮的原点定位修改为margin而非默认的padding。 通过subcontrol-position可以指定::drop-down子控件相对于margin的对齐方式。

通过width和height属性可以指定子控件size，值得注意的是：为子控件设置image可以隐式的指定子控件size。

Qt Style Sheet还为子控件提供了：left top right bottom及position属性来设置其偏移（只有子控件有这待遇哦），这样大大方便了子控件在各伪状态下的动态效果，如：

QComboBox::down-arrow { image: url(down_arrow.png); }

QComboBox::down-arrow:pressed { position: relative; top: 1px; left: 1px; }

上述示例表示下拉按钮按下时，上方和左方各自相对偏移1px。position属性指定了偏移方式为相对偏移。

以下为摘自Qt官方文档的子控件列表： Sub-Control ::add-line ::add-page Description The button to add a line of a QScrollBar. The region between the handle (slider) and the add-line of a QScrollBar. ::branch ::chunk ::close-button ::corner The branch indicator of a QTreeView. The progress chunk of a QProgressBar. The close button of a QDockWidget or tabs of QTabBar The corner between two scrollbars in a QAbstractScrollArea ::down-arrow The down arrow of a QComboBox, QHeaderView (sort indicator), QScrollBar or QSpinBox. ::down-button The down button of a QScrollBar or a QSpinBox. ::drop-down ::float-button The drop-down button of a QComboBox. The float button of a QDockWidget ::groove ::indicator The groove of a QSlider. The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox. ::handle The handle (slider) of a QScrollBar, a QSplitter, or a QSlider. ::icon ::item The icon of a QAbstractItemView or a QMenu. An item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar. ::left-arrow ::left-corner The left arrow of a QScrollBar. The left corner of a QTabWidget. For example, this control can be used to control position the left corner widget in a QTabWidget. ::menu-arrow The arrow of a QToolButton with a menu. ::menu-button The menu button of a QToolButton. ::menu-indicator The menu indicator of a QPushButton. ::right-arrow ::pane ::right-corner The right arrow of a QMenu or a QScrollBar. The pane (frame) of a QTabWidget. The right corner of a QTabWidget. For example, this control can be used to control the position the right corner widget in a QTabWidget. ::scroller ::section ::separator ::sub-line ::sub-page The scroller of a QMenu or QTabBar. The section of a QHeaderView. The separator of a QMenu or in a QMainWindow. The button to subtract a line of a QScrollBar. The region between the handle (slider) and the sub-line of a QScrollBar. ::tab ::tab-bar The tab of a QTabBar or QToolBox. The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs using the ::tab subcontrol. ::tear ::tearoff ::text ::title ::up-arrow The tear indicator of a QTabBar. The tear-off indicator of a QMenu. The text of a QAbstractItemView. The title of a QGroupBox or a QDockWidget. The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox. ::up-button

The up button of a QSpinBox. 4、伪状态(Pseudo-States)

伪状态用于定制widget控件在不同状态下的样式，通过:可连接选择器与伪状态，如下：

QPushButton:hover { color: white }

上述示例表示QPushButton在略过状态时，前景色为白色。伪状态可以实现常见逻辑运算：非、或、且。

4.1 伪状态的非运算

QPushButton:!hover { color: white }

用!可实现伪状态非运算，示例表示QPushButton在非略过状态时，前景色为白色。

4.2 伪状态的与运算

QCheckBox:hover:checked { color: white }

多个伪状态链式连接可表示多个伪状态与运算关系。示例表示QCheckBox在勾选状态下略过时前景色为白色。还可以非运算后伪状态的与运算，如下：

QPushButton:hover:!pressed { color: blue; }

4.3 伪状态的或运算

QCheckBox:hover, QCheckBox:checked { color: white }

用逗号隔开的伪状态可以实现或运算，但注意逗号隔开的伪状态必须带选择器。

以下为摘自Qt官方文档的伪状态列表： Pseudo-State :active Description This state is set when the widget resides in an active window. :adjoins-item This state is set when the ::branch of a QTreeView is adjacent to an item. :alternate This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true. :bottom The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom. :checked The item is checked. For example, the checked state of QAbstractButton. :closable The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on. :closed The item is in the closed state. For example, an non-expanded item in a QTreeView :default The item is the default. For example, a default QPushButton or a default action in a QMenu. :disabled :editable The item is disabled. The QComboBox is editable. :edit-focus The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications. :enabled :exclusive The item is enabled. The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup. :first The item is the first (in a list). For example, the first tab in a QTabBar. :flat :floatable The item is flat. For example, a flat QPushButton. The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on. :focus :has-children The item has input focus. The item has children. For example, an item in a QTreeView that has child items. :has-siblings The item has siblings. For example, an item in a QTreeView that siblings. :horizontal :hover :indeterminate The item has horizontal orientation The mouse is hovering over the item. The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked. :last The item is the last (in a list). For example, the last tab in a QTabBar. :left The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left. :maximized The item is maximized. For example, a maximized QMdiSubWindow. :middle The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a QTabBar. :minimized The item is minimized. For example, a minimized QMdiSubWindow. :movable The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on. :no-frame The item has no frame. For example, a frameless QSpinBox or QLineEdit. :non-exclusive The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup. :off For items that can be toggled, this applies to items in the \"off\" state. :on For items that can be toggled, this applies to widgets in the \"on\" state. :only-one The item is the only one (in a list). For example, a lone tab in a QTabBar. :open The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu. :next-selected The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item. :pressed The item is being pressed using the mouse. :previous-selected The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab. :read-only The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox. :right The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right. :selected The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu. :top The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top. :unchecked :vertical :window

The item is unchecked. The item has vertical orientation. The widget is a window (i.e top level widget)