Qt样式表:QSS名词解释

Qt样式表:QSS名词解释

目录

  • 一、选择器(selector)
  • 二、辅助控制器(sub-control)
  • 三、伪状态( pseudo-states)
  • 四、属性
  • 五、值
  • 六、逻辑否(!)
  • 七、盒模型(The Box Model)
  • 八、背景色和前景色

Qt 的样式表主要是受到 CSS 的启发,通过调用 QWidget::setStyleSheet() 或 QApplication::setStyleSheet(),你可以为一个独立的子部件、整个窗口,甚至是整个应用程序指定一个样式表。样式表由影响窗口部件绘制的样式规则组成。这些规则都是普通文本。由于在运行时会解析样式表,所以可以通过定制样式表的方式来尝试设计不同的 Qt 应用程序。

一、选择器(selector)

意思是:选择特定的类,一般为一个可以定制样式表的 Qt 类,所谓的选择器可以理解为 CSS 中的选择器,他指定了一类部件进行设计。下图总结了最有用的选择器。

选择器 实例 可以匹配的窗口部件
通配符选择器 * 匹配所有控件
类型选择器 QPushButton 通过控件类型来匹配控件(包含子类)
类选择器 .QPushButton 通过控件类型来匹配控件(不包含子类)
ID选择器 QPushButton#okButton 通过 objectName 来匹配控件
属性选择器 QPushButton[flat=”false”] 通过属性值来匹配控件
后代选择器 QWidget QPushButton 通过父控件的(直接或者间接)子控件来筛选控件
子选择器 QWidget > QPushButton 通过父控件的(直接)子控件来筛选控件,间接的不行

思维导图如下:

二、辅助控制器(sub-control)

辅助控制器一词是相对于选择器存在的,可以理解为我们选择了一个部件,例如一个 QcheckBox,这个部件它分为两个部分,文本部分和可以点击的小窗口的部分,如下图所示。而这个可点击的小窗口部分我们要单独的设置,就要再次分离出来,就需要::indicator(QCheckBox 有这个辅助控制器)来设置,例子如下:

/*说明是在QCheckBox中的指示符( indicator)宽为20px,height 为20px。*/
QCheckBox::indicator{
	width:20px;
	height:20px;
}

辅助控制器是用双冒号进行指定。如果没有::indicator那么我们这个小例子将是对整个 QCheckBox 设置的,使用了辅助控制器的时候就自动分离出这个小窗口,对小窗口进行设置。不同的选择器有不同的辅助控制器,具体可查看下表。

辅助控制器 说明
::add-line 在 QScrollBar 中添加一行的按钮
::add-page:branch 在 QScrollBar 中添加页的按钮
::branch QTreeView 的分支
::chunk QProgressBar 的进度条里的块(里面的进度条可以变成一块一块的增加,而不是整体都是一种颜色)
::colse-button QDockWidget 和 QTabBar 标题栏上的关闭按钮
::corner 在 QAbstractScrollArea 两个滚动条之间的位置
::drwn-arrow QComboBox、QHeaderView (排序时需要)、QScrollBar、QSpinBox 的向下箭头
::up-button QScrollBar、QSpinBox 的向上按钮
::down-button QScrollBar、QSpinBox 的向下按钮
::drop-down QComboBox 展开时
::float-button QDockWidget 标题栏上的浮动按钮
:groove Qslider的槽
:indicator QAbstractitemView、QCheckBox、QRadioButton、可点击的 QMenu 的 item、可点击的 QGroupBox 的指示符
::handle QScrollBar、QSplitter、QSlider 的滑块
::icon QAbstractitemView 和 QMenu 的图标
::item QAbstractitemView、QMenuBar、QMenu、QStatusBar 的单独的一项
::left-arrow QScrollBar 的向左的箭头
::left-corner QTabWidget 的左侧
::menu-arrow 菜单里 QToolButton 箭头
::menu-button 工具栏上的按钮
::menu-indicator 菜单里的 QPushButton 指示符
::right--arrow QMenu 或者是 QScrollBar 的右侧箭头
::pane QTabWidget 去掉标题的框架
::right-corner QTabWidget 的右侧
::scroller QMenu 和 QTabBar 因为界面大小布局左右调试的滚动按钮
::section QHeaderView 的表头横向和纵向
::separator QMainWindow 和 QMenu 的分离器(就是一个主窗口被分割成几个小的区域的线,QMenu 里是 item 的分离线)
::sub-line QScrollBar 内容减少方向的按钮
::sub-page QScrollBar 减少一页的按钮,在滑块与减少一行 sub-line 之间
::tab QTabBar 和 QToolBox 的一个页选项
::tab-bar 一个 QTabWidget 的 tab 按钮,设置 tabs 一般用 ::tab
::tear TabBar 的指示符
::tearoff QMenu 的指示符
::text QAbstractitemView 的内容
::title QGroupBox 和 QDockWidget 的标题
::up-arrow QHeaderView(排序时)、QScrollBar、QSpinBox 向上按钮箭头

三、伪状态( pseudo-states)

除了辅助控制器对一个部件的分离,样式表还可以根据窗口部件的各个状态来设置窗口。例如 hover 表示鼠标划过时的状态,例子如下:

/*例子说明只有当鼠标滑过复选框文本时变为red*/