Qt Style Sheets Reference 笔记

QT QSS 样式表学习
1 可设置样式表的控件
QAbstractScrollArea 
QCheckBox 
QColumnView 
QComboBox 
QDateEdit 
QDateTimeEdit 
QDialog 
QDialogButtonBox 
QDockWidget 
QDoubleSpinBox 
QFrame 
QGroupBox 
QHeaderView 
QLabel 
QLineEdit 
QListView 
QListWidget 
QMainWindow 
QMenu 
QMenuBar 
QMessageBox 
QProgressBar 
QPushButton 
QRadioButton 
QScrollBar 
QSizeGrip 
QSlider 
QSpinBox 
QSplitter 
QStatusBar 
QTabBar 
QTabWidget 
QTableView 
QTableWidget 
QTextEdit 
QTimeEdit 
QToolBar 
QToolButton 
QToolBox 
QToolTip 
QTreeView 
QTreeWidget 
QWidget 

2 可设置的属性
/
alternate-background-color  背景色    用于抽象ItemView，若无设置，就默认为 AlternateBase规则
backgroud                   背景 
background-color            背景色
background-image            背景图
background-repeat           背景重复次数
background-position         背景对齐位置
background-attachment     背景吸附/考齐？
background-clip           背景夹？
background-origin         背景源？
///
border                   边框
border-top
border-right
border-bottom
border-left
border-color 
border-top-color
border-right-color
border-bottom-color
border-left-color
border-image 
border-radius            边框角度
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-style 
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width 
border-top-width
border-right-width
border-bottom-width
border-left-width
bottom            离底部长度
button-layout     按钮层类型

color                              颜色
dialogbuttonbox-buttons-have-icons  按钮是否显示图标
font                               字的属性              
font-family                         字体
font-size                           子大小
font-style                          字型（粗体 斜体）
font-weight                         字的粗细
gridline-color*                      网格线颜色， QTableView用
height                               高
icon-size                            图标
image*                               子控件图片
image-position                        图片位置
left                                  左边距
lineedit-password-character*           输入密码时显示的特殊字符
lineedit-password-mask-delay*          ？？？
margin                                 对齐
margin-top
margin-right
margin-bottom
margin-left

max-height 
max-width 
messagebox-text-interaction-flags*        ？？？
min-height                               最小高度
min-width                                 最小宽度
opacity*                                  不透明度
/
outline                                    外围线
outline-color
outline-offset
outline-style
outline-radius
outline-bottom-left-radius
outline-bottom-right-radius
outline-top-left-radius
outline-top-right-radius
///
padding                                    填充
padding-top
padding-right
padding-bottom
padding-left
paint-alternating-row-colors-for-empty-area      ？？？
position                                      位置（相对/绝对）
right 
selection-background-color*                  选中项背景色
selection-color*                             选中项颜色 
show-decoration-selected*                     ？？？
spacing*                                    内部的空格
subcontrol-origin*                         子控件源
subcontrol-position*                       子控件对齐位置
text-align                                 文本对齐
text-decoration                            文本装饰（无，上划线，下划线，横线，）
top                                        上位置
width                                       宽
///
3 图标列表
4 属性类型列表
Alignment 对齐类型   { top  | bottom | left | right | center }
Attachment 吸附类型  { scroll | fixed }
Background 背景类型  { Brush | Url | Repeat | Alignment }
Boolean 布尔类型 0 | 1
Border  边框类型  { Border Style | Length | Brush }
Border Image  边框图片类型  none | Url Number{4} (stretch | repeat){0,2}
Border Style  边框样式 dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none
Box Colors 盒子颜色  Brush{1,4}
Box Lengths 盒子长度
Brush        画刷   Color | Gradient | PaletteRole
Color        颜色   rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name 
Font      字体    (Font Style | Font Weight){0,2} Font Size String
Font Size  字大小
Font Style  字型（粗体 or 斜体）    normal | italic | oblique
Font Weight  字线条大小           normal | bold | 100 | 200 ... | 900
Gradient     梯度渐变（线性模式【以直线渐变】，半径模式【以圆圈方式旋转渐变】，圆形锥度【如画眼睛那样的亮度及阴影】）  qlineargradient | qradialgradient | qconicalgradient   
Icon         图标 (Url (disabled | active | normal | selected)? (on | off)? )*
Length       长度  Number (px | pt | em | ex)?
Number       数字 （整数 or  浮点）
Origin       起源  margin | border | padding | content
PaletteRole 调色板规则  alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link | link-visited | mid | midlight | shadow | text | window | window-text 
Radius       半径  Length{1, 2}
Repeat        重复  repeat-x | repeat-y | repeat | no-repeat
Url          文件路径 url(filename)



5 控件状态
:active       激活
:adjoins-item  QTreeView相邻项
:alternate     QAbstractItemView 备用
:bottom        在底端
:checked       选择
:closable      可关闭
:closed        关闭状态
:default       默认
:disabled      不使能
:editable      可编辑
:edit-focus     编辑中
:enabled        是能
:exclusive      组合控件中唯一的
:first          第一个
:flat           平的
:floatable      浮动
:focus          焦点中
:has-children    有子节点
:has-siblings     有兄弟
:horizontal       横向对齐
:hover            鼠标飘过
:indeterminate    不确定状态，如Checkbox的选中，不选择，之外的状态
:last             最后的
:left             左对齐的
:maximized        最大化
:middle           在中间的
:minimized        最小化
:movable          可移动
:no-frame          没有框架
:non-exclusive      非排他的（可以选择多项的）
:off                关闭的，
:on                 开启的
:only-one           唯一的
:open               QTreeView展开，开启的状态
:next-selected      下一个选中的
:pressed             按下
:previous-selected   前一个选中的
:read-only            只读
:right               右边对齐
:selected            选中的
:top                  上对齐
:unchecked           未选中
:vertical            纵向对齐
:window              窗体控件


6 子控件
::add-line The button to add a line of a QScrollBar.
::add-page The region between the handle (slider) and the add-line of a QScrollBar.
::branch The branch indicator of a QTreeView.
::chunk The progress chunk of a QProgressBar.
::close-button The close button of a QDockWidget or tabs of QTabBar
::corner The corner between two scrollbars in a QAbstractScrollArea
::down-arrow The down arrow of a QComboBox, QHeaderView (sort indicator), QScrollBar or QSpinBox.
::down-button The down button of a QScrollBar or a QSpinBox.
::drop-down The drop-down button of a QComboBox.
::float-button The float button of a QDockWidget
::groove The groove of a QSlider.
::indicator The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox.
::handle The handle (slider) of a QScrollBar, a QSplitter, or a QSlider.
::icon The icon of a QAbstractItemView or a QMenu.
::item An item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar.
::left-arrow The left arrow of a QScrollBar.
::left-corner The left corner of a QTabWidget. For example, this control can be used to control position the left corner widget in a QTabWidget.
::menu-arrow The arrow of a QToolButton with a menu.
::menu-button The menu button of a QToolButton.
::menu-indicator The menu indicator of a QPushButton.
::right-arrow The right arrow of a QMenu or a QScrollBar.
::pane The pane (frame) of a QTabWidget.
::right-corner The right corner of a QTabWidget. For example, this control can be used to control the position the right corner widget in a QTabWidget.
::scroller The scroller of a QMenu or QTabBar.
::section The section of a QHeaderView.
::separator The separator of a QMenu or in a QMainWindow.
::sub-line The button to subtract a line of a QScrollBar.
::sub-page The region between the handle (slider) and the sub-line of a QScrollBar.
::tab The tab of a QTabBar or QToolBox.
::tab-bar The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs using the ::tab subcontrol.
::tear The tear indicator of a QTabBar.
::tearoff The tear-off indicator of a QMenu.
::text The text of a QAbstractItemView.
::title The title of a QGroupBox or a QDockWidget.
::up-arrow The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox.
::up-button The up button of a QSpinBox.


7 样式的适用控件语法
《1.1 全部选中
*{样式名: 样式值}

《1.2 使用控件类型选中，包括子类
QPushButton {样式名: 样式值}
QPushButton, QLabel{样式名: 样式值}

《1.3 使用控件类型 + 属性选中 （等于 or 不等于）
QPushButton[flat="false"] {样式名: 样式值}
QPushButton[flat~="false"] {样式名: 样式值}      

 《1.4 使用控件类型选中，不包括子类
.QPushButton {样式名: 样式值}
*[class~="QPushButton"]{样式名: 样式值}

 《1.5 使用控件类型选中 + 控件名（object name）
QPushButton#okButton {样式名: 样式值}

 《1.6 使用父控件类型 + 后裔控件类型名。递归后裔选中，包括子控件，子控件的子控件等
QDialog QPushButton {样式名: 样式值}

 《1.7 使用父控件类型 + 子控件类型名。后裔选中，只包括直系子控件

QDialog > QPushButton {样式名: 样式值}

注意：

        pushBtn->setStyleSheet("background: red;");                //pushBtn的子控件会继承这条样式，例如toolTip等。
pushBtn->setStyleSheet("QPushButton {background: red;}"); //pushBtn的样式不会被子控件继承，且只有pushBtn会执行这条样式。

 《1.8 使用复杂控件类型 + 复杂控件类型下的附属控件名
QComboBox::drop-down {样式名: 样式值}

 《1.9 使用控件类型 + 控件当前状态
QPushButton:hover {样式名: 样式值}
QRadioButton:!hover  {样式名: 样式值}
QPushButton:hover:!pressed  {样式名: 样式值} 

8盒子模型

每个 Widget 所在的范围都是一个矩形区域（无规则窗口也是一个矩形，只是有的地方是透明的，看上去不是一个矩形而已），像是一个盒子一样。QSS 支持盒子模型（Box Model），和 CSS 的盒子模型是一样的，由 4 个部分组成：content, padding, border, margin，也就是说，Widget 的矩形区域，用这 4 个矩形表示

• content: 绘制内容的矩形区域（如绘制文本、图片），Qt 自带的 widget 都是在 content 区里绘制内容，这只是一个约定，只要你愿意，也可以在绘制到 padding, border, margin 区
• padding: 内容区和边框之间的间隔
• border: 边框，可视化的显示一个 widget 的逻辑范围，而不一定是 widget 所占矩形区域的实际大小
• margin: 想像 widget 的矩形区域有一个隐形的边框，margin 就是 border 和这个隐形边框之间的间隔

QWidget 的 content, padding, border, margin 的矩形区域都是一样大的，也就是说，margin, border, padding 的值为 0，content 的矩形和 QWidget 的矩形一样大，但是 QPushButton 默认的 margin, border, padding 的值不为 0（可以试试setFlat(true) 后再看看这几个值是什么）。

Margin，Border，Padding 都分为 4 个部分：上、右、下、左，它们的值可以不同：

padding: 2px 3px 4px 5px 表示:

• padding-top 为 2px
• padding-right 为 3px
• padding-bottom 为 4px
• padding-left 为 5px

padding: 2px 4px 表示:

• padding-top 和 padding-bottom 为 2px
• padding-right 和 padding-left 为 4px

padding: 2px 表示:

• padding-top、padding-right、padding-bottom、padding-left 都为 2px

Margin 和 border 的顺序和 padding 的顺序一样。

也许你也有和我一样的疑问，为什么不是从左开始，而是从上开始？对我来说，从左开始更习惯一些，但是 CSS 和 QSS 里就是这么规定的，没办法，既然不能反抗，那么就享受吧！

可能你还是不明白 margin, padding 具体是什么，下面用例子具体的的介绍它们。在 Designer 里用 QGridLayout 布局，拖放一个 QLabel 到窗口上，让其占据整个窗口，用下面的 QSS 把 QLabel 的 margin, border, padding 都设置为 50px：

QLabel {
    margin: 50px;
    border: 50px solid rgb(74, 74, 74);
    padding: 50px;
    background: white;
}

在 Designer 里选中 QLabel：

• 8 个蓝色小方块内就是 QLabel，外面是 parent widget 的，不属于 QLabel
• 标记为 margin 的部分是 margin，为 50px
• 标记为 padding 的部分是 padding，为 50px
• 用工具测量一下，得到 border 的宽也是 50px
• 小虚线方框内是 content rectangle，QLabel 就是在它里面绘制文本，图片等，不会绘制到 padding, border, margin 等上面（如果你自己想继承 QLabel 然后这么绘制，当然没问题）
• 当拖动修改窗口的大小后，QLabel 的大小随着改变了，但是 margin, border（宽）, padding 的大小都不会变，变化的只有 content rectangle
• Margin 是不可见的，不绘制任何东西
• Padding 是不可见的，但是 QLabel 的背景会绘制到它里面
• Border 是可见的，在背景上面绘制 border（如果 border 是半透明的时候可以看到和背景的融合效果）
• Content 是可见的，在背景上绘制 QLabel 的内容：文本，图片