Qt-----QSS样式表

样式表

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;