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 制作相框