Qt界面美化QSS——（一）使用方式、语法（选择器、伪状态）

QSS——Qt Style Sheet，Qt通过样式表设置控件样式进行个性化定制、界面美化。

1.使用方式

1.1.Qt Designer

在Qt Designer中，每个控件都有styleSheet属性，通过键入样式表，即可设置该控件的样式。如下图：

使用该方式的好处在于，可以直观看到设计效果，通过Ctrl+R就可以预览窗体设计。并且在编辑样式表窗口中添加资源、添加渐变、添加颜色、添加字体，方便直接编辑特定样式的颜色。此类方式编辑的样式表会作用于当前控件及其所有子控件。

1.2.QSS文件

使用QFile读入样式表，使用setStyleSheet进行设置。示例代码如下：

QApplication app(argc, argv);
QFile qss("StyleSheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

此通过加载StyleSheet文件，对整个软件的所有控件样式进行设置。这种方式“一劳永逸”，可以设计自己的风格，所有软件重复使用。

Qt Designer方便直接界面调试，并且可以对颜色进行编辑。适合设计时使用，当然也可以直接用作界面美化。当Qt Desinger编辑的样式表固定好之后，可以组织保存到QSS文件中，直接代码加载即可。

2.语法

2.1.基础语法

QSS同CSS语法规则类似，形式如下：
selector{attribute:value};
其中：
selector选择器：通常情况下为控件类名（如QPushButton）；
attribute属性：待设置的样式表属性（如background-color）；
value值：属性赋值（如rgb(40, 85, 20);）；

QPushButton { color: red }

Qt样式表通常不区分大小写(即，color、Color、color和color指的是同一属性)。但是是类名、对象名和Qt属性名，它们区分大小写。

2.2.共享属性

对于共享属性部分可以使用下面形式：

QCheckBox,QComboBox,QSpinBox
{
	color:rgb(255,0,0);
	background-color:rgb(255,255,255);
	font:bold;
}

这样就设置了所有作用范围内的QCheckBox、QComboBox、QSpinBox的前景色、背景色和字体。

2.3.选择器（selector）

Qt样式表支持CSS2中定义的所有选择器。下表总结了最有用的选择器类型。

选择器	举例	解释
通用选择器	*	所有 Qt 的 widget，即不声明选择器时，属性作用于所有组建
类型选择器	QPushButton	作用于QPushButton及其子类的实例。
属性选择器	QPushButton[flat=“false”]	作用于非平面（flat=“false”）的QPushButton实例。
类选择器	.QPushButton	作用于QPushButton的实例，但不匹配其子类的实例。（加了个’.’)
ID选择器	QPushButton#okButton	作用于对象名称为okButton的所有QPushButton实例。
后代选择器	QDialog QPushButton	匹配作为QDialog的子体(子级、孙级等)的所有QPushButton实例。
子选择器	QDialog > QPushButton	匹配作为QDialog的直接子级的所有QPushButton实例。
子控制	QComboBox::drop-down	要设置复杂 widget 的样式，需要访问 widget 的子控件，如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可以包含子控件，从而可以将规则的应用限制到特定的 widget 子控件。

2.4.伪状态（Pseudo-States）

用户在操作时，可以根据不同的交互状态展示不同的用户样式，界面能够识别用户操作，不需要代码控制即可响应不同状态下的样式。例如：

QPushButton {
    border: 1px solid #555;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #999;
}

QPushButton:pressed {
    background-color: #333;
    border-color: #555;
    color: #AAA;
}

QPushButton:disabled {
    color: #333333;
}

QPushButton在hover、pressed、disabled状态时，分别展示不同的样式。
下列是从qt-5/stylesheet-reference中翻译过来的所有伪状态。

Pseudo-State	Description
:active	此状态在widget驻留在活动窗口中时设置。
adjoins-item	此状态在QTreeView的::branch与项相邻时设置。
:alternate	当QAbstractItemView::ternatingRowColors()设置为true时，将为绘制QAbstractItemView的行时的每隔一行设置此状态。
:bottom	该项目位于底部。例如，标签位于底部的QTabBar。
:checked	该项目已选中。例如，QAbstractButton的选中状态。
:closable	这些项目可以关闭。例如，QDockWidget打开了QDockWidget::DockWidgetClosable功能。
:default	该项目为默认值。例如，QMenu中的默认QPushButton或默认操作。
:disabled	该项目已禁用。
:editable	QComboBox是可编辑的。
:edit-focus	该项具有编辑焦点(请参见QStyle::State_HasEditFocus)。此状态仅适用于Qt扩展应用程序。
:enabled	该项目已启用。
:exclusive	该项目是独占项目组的一部分。例如，独占QActionGroup中的菜单项。
:first	该项目是(列表中的)第一个项目。例如，QTabBar中的第一个选项卡。
:flat	这件物品是平的。例如，平面QPushButton。
:floatable	这些项目可以浮动。例如，QDockWidget打开了QDockWidget：：DockWidgetFloatable功能。
:focus	该项具有输入焦点。
:has-children	该项目具有子项。例如，QTreeView中具有子项的项。
:has-siblings	该项目有同级。例如，QTreeView中的同级项。
:horizontal	该项目具有水平方向
:hover	鼠标悬停在该项目上。
:indeterminate	该项具有不确定状态。例如，部分选中QCheckBox或QRadioButton。
:last	该项是(列表中的)最后一项。例如，QTabBar中的最后一个选项卡。
:left	该项目位于左侧。例如，选项卡位于左侧的QTabBar。
:maximized	该项目将最大化。例如，最大化的QMdiSubWindow。
:middle	项目在中间(在列表中)。例如，QTabBar中不在开头或结尾的制表符。
:minimized	该项目被最小化。例如，最小化的QMdiSubWindow。
:movable	物品可以四处移动。例如，QDockWidget打开了QDockWidget::DockWidgetMoovable功能。
:no-frame	该项目没有框架。例如，无框架的QSpinBox或QLineEdit。
:non-exclusive	该项是非独占项组的一部分。例如，非独占QActionGroup中的菜单项。
:off	对于可以切换的项目，这适用于处于“关闭”状态的项目。
:on	对于可以切换的项目，这适用于处于“打开”状态的widget。
:only-one	该项目是(列表中的)唯一项目。例如，QTabBar中的一个单独的选项卡。
:open	该项目处于打开状态。例如，QTreeView中的展开项，或具有打开菜单的QComboBox或QPushButton。
:next-selected	选择下一项(在列表中)。例如，QTabBar的选定选项卡紧挨着该项。
:pressed	正在使用鼠标按下该项。
:previous-selected	选择上一项(在列表中)。例如，QTabBar中选定选项卡旁边的选项卡。
:read-only	该项目标记为只读或不可编辑。例如，只读QLineEdit或不可编辑的QComboBox。
:right	该项目位于右侧。例如，选项卡位于右侧的QTabBar。
:selected	该项目即被选中。例如，QTabBar中的选定选项卡或QMenu中的选定项目。
:top	该项目位于顶部。例如，选项卡位于顶部的QTabBar。
:unchecked	该项目处于取消选中状态。
:vertical	该项目具有垂直方向。
:window	widget是窗口(即顶层小部件)