目录
- 样式表
- 1，样式表基本语法
- 1.1 选择器
- 2，盒子模型
- 2.1 概述
- 2.2 制作相框
样式表
setStyleSheet() 设置样式表函数。
1，样式表基本语法
QPushButton{color:red;background-color:yellow
}整个QSS语句由两部分组成，选择器，属性。
选择器表示对哪些控件进行样式的设置，也就是要设置样式的对象。
1.1 选择器
- 通用选择器：
// * 代表所有控件
*{font-size: 20pt;}- 类选择器：
QPushButton{font-size: 20pt;}
QPushButton,QLable{font-size: 20pt;}- ID选择器,也可以称为对象选择器：
//表示所有QPushButton类对象字体大小设置成 20pt 但是名为 btn1 的对象大小设置为 40pt
QPushButton{font-size: 20pt;}
QPushButton#btn1{font-size: 40pt;}- 属性选择器：
QPushButton{font-size: 20pt;}
//[] 内为属性的筛选
QPushButton[flat="true"]{font-size: 40pt;}- 后代选择器：
//指定只有QFrame的直接后代QPushButton，不包括后代的后代QPushButton
QFrame > QPushButton{
font-size: 20pt;
color:red;
}
//表示QFrame的·所有后代 QPushButton 包含后代的后代
QFrame QPushButton{
font-size: 20pt;
color:red;
}- 子控件选择器：
//indicator表示QCheckBox的子控件
QCheckBox::indicator{border:2px solid rgb(255,255,0); width: 30px;height: 30px;}- 状态选择器：
//hover表示鼠标悬停在QCheckBox上面
QCheckBox:hover{color:blue;}2，盒子模型
2.1 概述
外边框(MARGIN)，边框(BORDER)，内边框(PADDING)，内容(CONTENT)
在使用样式表时，每个部件都被视为一个包含四个同心矩形的盒子：外边距矩形、边框矩形、内边距矩形和内容矩形。盒模型对此有更详细的描述。
盒模型
这四个同心矩形在概念上的呈现如下：
- 外边距位于边框之外。
- 边框绘制在外边距和内边距之间。
- 内边距位于边框之内，在边框与实际内容之间。
- 内容是在我们去除外边距、边框和内边距后，原始部件或子控件剩余的部分。
外边距、边框宽度和内边距属性的默认值均为零。在这种情况下，四个矩形（外边距、边框、内边距和内容）完全重合。
1，可以使用 background-image 属性为部件指定背景。
默认情况下，背景图像仅绘制在边框内部的区域。这可以通过 background-clip 属性进行更改。你可以使用 background-repeat 和 background-origin 来控制背景图像的重复方式和起始位置。
2，背景图像不会随部件大小缩放。要提供一个随部件大小缩放的 “皮肤” 或背景，必须使用 border-image。
由于 border-image 属性提供了一种替代背景，因此在指定 border-image 时，无需指定 background-image。如果同时指定了这两个属性，则 border-image 会绘制在 background-image 之上。
此外，image 属性可用于在 border-image 上绘制图像。指定的图像不会平铺或拉伸，当其大小与部件大小不匹配时，使用 image - position 属性指定其对齐方式。与 background-image 和 border-image 不同，在 image 属性中可以指定一个 SVG，在这种情况下，图像会根据部件大小自动缩放。
渲染一条规则的步骤如下：
- 为整个渲染操作设置裁剪（border - radius）
- 绘制背景（background-image）
- 绘制边框（border-image，border）
- 绘制覆盖图像（image）
background-image:url("D:/path/pic.jpg");
border-image:url("D:/path/pic.jpg");
image:url("D:/path/pic.jpg");
image-positon:top left子控件
一个部件被视为一个由相互叠加绘制的子控件组成的层次结构（树）。例如，QComboBox 会先绘制下拉子控件，然后绘制下箭头子控件。因此，QComboBox 的渲染方式如下：
渲染 QComboBox { } 规则
渲染 QComboBox::drop - down { } 规则
渲染 QComboBox::down - arrow { } 规则
子控件具有父子关系。以 QComboBox 为例，下箭头的父控件是下拉控件，而下拉控件的父控件是部件本身。子控件使用 subcontrol - position 和 subcontrol - origin 属性在其父控件内进行定位。
定位完成后，可以使用盒模型对子控件进行样式设置。
注意： 对于像 QComboBox 和 QScrollBar 这样的复杂部件，如果自定义了一个属性或子控件，那么所有其他属性或子控件也必须进行自定义。
2.2 制作相框
border:10px solid brown;
border-radius:40px; //圆角
background-color:lightyellow;