Qt 样式表之QSS

前言

最近想给程序做个换皮肤的功能，于是想起了用 QSS。QSS 这个东西也算是老古董了，博主刚工作那会就有接触过，但是没有深入去了解，趁着这一次机会来学习一下。网上翻阅了一些资料，结合 Qt 的官方文档，博主把 QSS 的相关知识点整理了一下，希望对大家有帮助，也方便自己后期回顾。

一. QSS 简介

QSS 全称为 Qt Style Sheets 也就是 Qt 样式表，它是 Qt 提供的一种用来自定义控件外观的机制。QSS 大量参考了 CSS 的内容，只不过 QSS 的功能要比 CSS 弱很多，体现在选择器要少，可以使用的 QSS 属性也要少很多，并且并不是所有的属性都可以用在 Qt 的所有控件上。

二. QSS 语法高亮

通过 “工具” -> “选项” 进入设置，通过 “text/css” 快速定位，然后在详情中添加 “*.qss” 即可实现 QSS 文件语法高亮，注意分隔符用 ‘;’

三. 如何在 Qt 程序中加载 QSS

void MainWindow::changeStyle(QString fileName)
{
    QString path = ":/qss/"+ fileName;
    QFile file(path);

    if ( file.open(QFile::ReadOnly) )
    {
        QString qss = QLatin1String(file.readAll());
        this->setStyleSheet(qss);
        file.close();
    }
}

四. QSS 语法解析

这里先献上 Qt 的 QSS 官方文档 和 QSS 官方示例，方便大家查阅对比。

1. 基础语法
   selector { attribute : value };
   其中：
   selector 选择器：通常情况下为控件类名（如 QPushButton）；
   attribute 属性：待设置的样式表属性（如 background-color）；
   value 值：属性赋值（如 rgb(40, 85, 20);）；
   示例：QPushButton { color: red }

*注：Qt 样式表通常不区分大小写（即，color、Color、color 和 color 指的是同一属性）但是类名、对象名和 Qt 属性名，它们是区分大小写的；

2. 共享属性

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

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

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	作用于 QComboBox 的子控件 drop-down 下拉箭头

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;
}

下表为 QSS 官方文档翻译过来的全部伪状态：

伪状态	解释
: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	这些项目可以浮动。例如，QDockWidge t打开了 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是窗口（即顶层小部件）

5. 子控件
   要设置复杂的 widget 样式，需要访问 widget 的子控件，如 QComboBox 的下拉按钮或 QSpinBox 的上下箭头。选择器可以包含子控件，从而可以将规则的应用限制到特定的 widget 子控件；

下表为 QSS 官方文档翻译过来的全部子控件：

子控件	说明
::add-line	QScrollBar 添加行的按钮
::add-page	QScrollBar 的控制柄（滑块）和添加线之间的区域
::branch	QTreeView 的分支指示符
::chunk	QProgressBar 的进度块
::close-button	QDockWidget 或 QTabBar 选项卡的关闭按钮
::corner	在 QAbstractScrollArea 中两个滚动条之间的角
::down-arrow	QComboBox、QHeaderView（排序指示符）、QScrollBar 或 QSpinBox 的向下箭头
::down-button	QScrollBar 或 QSpinBox 的向下按钮
::drop-down	QComboBox 的下拉按钮
::float-button	QDockWidget 的浮动按钮
::groove	QSlider 的槽
::indicator	QAbstractItemView、QCheckBox、QRadioButton、可点击的 QMenu 项或可点击的 QGroupBox 的指示器
::handle	QScrollBar、QSplitter 或 QSlider 的手柄（滑块）
::icon	QAbstractItemView 或 QMenu 的图标
::item	QAbstractItemView、QMenuBar、QMenu 或 QStatusBar 的项
::left-arrow	QScrollBar 的左箭头
::left-corner	QTabWidget 的左角。例如，此控件可用于控制 QTabWidget 中的左角小部件的位置
::menu-arrow	带有菜单的 QToolButton 的箭头
::menu-button	QToolButton 的菜单按钮
::menu-indicator	QPushButton 的菜单指示器
::right-arrow	QMenu 或 QScrollBar 的右箭头
::pane	QTabWidget 的窗格（框架）
::right-corner	QTabWidget 的右角。例如，此控件可用于控制 QTabWidget 中右角小部件的位置
::scroller	QMenu 或 QTabBar 的滚动条
::section	QHeaderView 的部件
::separator	QMenu 或 QMainWindow 中的分隔符
::sub-line	QScrollBar 减去行的按钮
::sub-page	QScrollBar 的控制柄（滑块）和子行之间的区域
::tab	QTabar 或 QToolBox 的选项卡
::tab-bar	QTabWidget 的选项卡栏。这个子控件的存在只是为了控制 QTabWidget 中 QTabBar 的位置
::tear	QTabBar 的撕裂指示器
::tearoff	QMenu 的撕裂指示器
::text	QAbstractItemView 的文本
::title	QGroupBox 或 QDockWidget 的标题
::up-arrow	QHeaderView（排序指示符）、QScrollBar 或 QSpinBox 的向上箭头
::up-button	QSpinBox 的向上按钮

五. 案例展示

1. 原始经典
   
2. 爆炎黑
   
3. 天空蓝
   
4. 亚麻橙
   
5. 工业灰
   
6. 森林绿
   
7. 梦幻紫
   
8. 冰川银