最近想给程序做个换皮肤的功能，于是想起了用 QSS。QSS 这个东西也算是老古董了，博主刚工作那会就有接触过，但是没有深入去了解，趁着这一次机会来学习一下。网上翻阅了一些资料，结合 Qt 的官方文档，博主把 QSS 的相关知识点整理了一下，希望对大家有帮助，也方便自己后期回顾。
QSS 全称为 Qt Style Sheets 也就是 Qt 样式表，它是 Qt 提供的一种用来自定义控件外观的机制。QSS 大量参考了 CSS 的内容，只不过 QSS 的功能要比 CSS 弱很多，体现在选择器要少，可以使用的 QSS 属性也要少很多，并且并不是所有的属性都可以用在 Qt 的所有控件上。
通过 “工具” -> “选项” 进入设置，通过 “text/css” 快速定位，然后在详情中添加 “*.qss” 即可实现 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();
}
}
这里先献上 Qt 的 QSS 官方文档 和 QSS 官方示例，方便大家查阅对比。
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 的前景色、背景色和字体；
| 选择器 | 举例 | 解释 |
|---|---|---|
| 通用选择器 | * | 所有 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 下拉箭头 |
示例程序为一个按钮在默认、悬浮、按下和禁用时的样式：
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是窗口（即顶层小部件） |
下表为 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 的向上按钮 |
联系客服
