杭州网站建设案例seo交流qq群
前言
最近想给程序做个换皮肤的功能，于是想起了用 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 官方示例，方便大家查阅对比。
- 基础语法
selector { attribute : value };
其中：
selector 选择器：通常情况下为控件类名（如 QPushButton）；
attribute 属性：待设置的样式表属性（如 background-color）；
value 值：属性赋值（如 rgb(40, 85, 20);）；
示例：QPushButton { color: red }
*注：Qt 样式表通常不区分大小写（即，color、Color、color 和 color 指的是同一属性）但是类名、对象名和 Qt 属性名，它们是区分大小写的；
- 共享属性
QCheckBox, QComboBox, QSpinBox
{color:rgb(255,0,0);background-color:rgb(255,255,255);font:bold;
}
这样就设置了所有作用范围内的 QCheckBox、QComboBox、QSpinBox 的前景色、背景色和字体；
- 选择器（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 下拉箭头 |
- 伪状态（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是窗口（即顶层小部件） |
- 子控件
要设置复杂的 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 的向上按钮 |
五. 案例展示
- 原始经典
- 爆炎黑
- 天空蓝
- 亚麻橙
- 工业灰
- 森林绿
- 梦幻紫
- 冰川银
