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 的内容:文本,图片