QSS

1 QSS概述

QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制来自定义控件的外观,与HTML中的CSS类似.

2 使用方法

2.1 在Qt Designer中设置stylesheet

2.2 在代码中调用控制的stylesheet()接口来设置样式

2.3 将QSS内容保存到文件中，通过代码读取该文件内容。

void MainWindow::load_style_sheet(const QString &fileName)
{
    QFile file(fileName);
    if(file.open(QFile::ReadOnly)) {
        qApp->setStyleSheet(file.readAll());
        file.close();
    }
}

2.4 使用命令行参数"-stylesheet"来指定要加载的QSS文件

./QtDemo -stylesheet test.qss

3 语法规则

QSS的语法规则与CSS类型。

4 选择器类型

选择器类型	举例	说明
通配选择器	*	匹配所有控件
类型选择器	QPushButton	匹配所有QPushButton和其子类的对象
属性选择器	QPushButton[flat="flase"]	匹配所有属性flat的值为flase的QPushButton类型对象
类选择器	.QPushButton	匹配所有QPushButton的对象,但是不匹配其子类的对象
ID选择器	#myBtn	匹配所有ID为myBtn的控件对象,此ID为对象的objectName属性
后代选择器	QDialog QPushButton	所有QDialog容器中包含QPushButton类型的对象,不管直接或间接包含
子选择器	QDialog > QPushButton	所有QDialog容器下所有QPushButton对象,必须是直接包含

• 以上选择器可以联合使用,并且支持一次设置多个选择器类型,用逗号隔开,如#object1,#object2,#object3表示所有这个ID使用同个规则;QDialog #object1表示选择所有QDialog下所有ID为object1的对象.

5 属性

在QSS中设置的属性分为两种:

• 样式表的属性, 如border、border-radius、background-color等属性，即为CSS标准的一部分属性
• QObject系统的属性，如QLable::alignment、QLabel::text、QLabel::wordWrap等属性，即在QObject框架中使用“Q_PROPERTY”申明的属性。

在设置QSS时，不仅可以设置样式表属性，也可以设置QObject定义的属性，设置QOjbect属性时，需要在属性名前面加上"qproperty-"。比如要设置QLabel::alignment属性时在QSS中需要写成qproperty-alignment，如果属性有多个值组成，需要将这个值用单引号和双引号括起来。

以下是使用QSS属性和QObject属性的示例。

QLabel {
  border-radius: 3px;
  background-color: white;
  qproperty-alignment: AlignCenter; /*或者是 "AlignHCenter|AlignVCenter"*/
  qproperty-text:'This is a Text Mesage';
}

6 子控件

7 伪状态

伪状态	描述
:active	部件存于激活的窗口时，该状态有效
: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	The item is disabled.
:editable	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	The item is enabled.
:exclusive	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	The item is flat. For example, a flat QPushButton.
:floatable	The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on.
:focus	The item has input focus.
:has-children	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	The item has horizontal orientation
:hover	The mouse is hovering over the item.
:indeterminate	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	The item is unchecked.
:vertical	The item has vertical orientation.
:window	The widget is a window (i.e top level widget)

级联与冲突

资料

• 《QSS总结》
• 官方参考文档

FAQ

继承QWidget后, setStyleSheet无效

解决方法:需要重载paintEvent函数,在该函数中加上以下代码:

QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
QWidget::paintEvent(e);