Yofer's Home

# QT美化之QSS笔记

  • Author: 浅若清风cyf

[toc]

# 官方文档

# 参考资料

# 一、QSS选择器

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

# 二、QSS属性设置

官方文档：

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

  • 样式表的属性, 如border、border-radius、background-color等属性
  • QObject系统的属性（QtDesigner中的属性/对象属性），如QLabel::alignment、QLabel::text、QLabel::wordWrap等属性，即在QObject框架中使用“Q_PROPERTY”申明的属性。

注：

  • 设置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';
}

# 三、子控件（::）

官方文档：

  • 示例：下拉列表控件未展开状态下右侧的图标：QComboBox::drop-down { image: url(dropdown.png) }
  • 翻译版本：
Sub-Control Description
::add-line 用于添加 QScrollBar (opens new window) 行的按钮。
::add-page 控点（滑块）和 QScrollBar (opens new window) 的附加行 (opens new window)之间的区域。
::branch QTreeView (opens new window) 的分支指标。
::chunk QProgressBar (opens new window) 的进度块。
::close-button QDockWidget (opens new window) 的关闭按钮或 QTabBar (opens new window) 的选项卡
::corner QAbstractScrollArea (opens new window) 中两个滚动条之间的角
::down-arrow QComboBox (opens new window)、QHeaderView (opens new window)（排序指示器）、QScrollBar (opens new window) 或 QSpinBox (opens new window) 的下拉箭头。
::down-button QScrollBar (opens new window) 或 QSpinBox 的下 (opens new window)拉按钮。
::drop-down QComboBox (opens new window) 的下拉按钮。
::float-button QDockWidget (opens new window)的浮动按钮
::groove QS滑块 (opens new window)的凹槽。
::indicator QAbstractItemView (opens new window)、QCheckBox (opens new window)、QRadioButton (opens new window)、可检查 QMenu (opens new window) 项或可检查 QGroupBox (opens new window) 的指示器。
::handle QScrollBar (opens new window)、QSplitter 或 QSlider (opens new window) 的手柄（滑块）。
::icon QAbstractItemView (opens new window) 或 QMenu (opens new window) 的图标。
::item QAbstractItemView (opens new window)、QMenuBar (opens new window)、QMenu (opens new window) 或 QStatusBar (opens new window) 中的项。
::left-arrow QScrollBar (opens new window) 的左箭头。
::left-corner QTabWidget (opens new window) 的左角。例如，此控件可用于控制 QTabWidget (opens new window) 中左角小部件的位置。
::menu-arrow 带有菜单的 QToolButton (opens new window) 的箭头。
::menu-button QToolButton (opens new window) 的菜单按钮。
::menu-indicator QPushButton (opens new window) 的菜单指示器。
::right-arrow QMenu (opens new window) 或 QScrollBar (opens new window) 的右箭头。
::pane QTabWidget (opens new window) 的窗格（框架）。
::right-corner QTabWidget (opens new window) 的右上角。例如，此控件可用于控制 QTabWidget (opens new window) 中右角小部件的位置。
::scroller QMenu (opens new window) 或 QTabBar (opens new window) 的滚动条。
::section QHeaderView 的一 (opens new window)部分。
::separator QMenu (opens new window) 或 QMainWindow (opens new window) 中的分隔符。
::sub-line 用于减去 QScrollBar (opens new window) 的一行的按钮。
::sub-page 控点（滑块）和 QScrollBar (opens new window) 子行 (opens new window)之间的区域。
::tab QTabBar (opens new window) 或 QToolBox (opens new window) 的选项卡。
::tab-bar QTabWidget (opens new window) 的选项卡栏。此子控件仅用于控制 QTabWidget (opens new window) 中 QTabBar (opens new window) 的位置。使用 ：：tab (opens new window) 子控件设置选项卡的样式。
::tear QTabBar (opens new window) 的撕裂指示器。
::tearoff QMenu (opens new window) 的撕裂指示器。
::text QAbstractItemView (opens new window) 的文本。
::title QGroupBox (opens new window) 或 QDockWidget (opens new window) 的标题。
::up-arrow QHeaderView (opens new window)（排序指示器）、QScrollBar (opens new window) 或 QSpinBox 的 (opens new window)向上箭头。
::up-button QSpinBox (opens new window)的向上按钮。

# 四、伪状态（:）

官方文档：

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

#

← 系统维护手册 →