Qt 的线性渐变的类QLinearGradient 学习笔记

news2025/1/11 12:49:50

QLinearGradient 是 Qt 中用于创建线性渐变的类，它允许你在控件上应用从一个颜色到另一个颜色的渐变效果。QLinearGradient 的参数用于定义渐变的方向、范围以及颜色变化。下面是 QLinearGradient 的各个主要参数及其详细解释：
1. x1 和 y1
定义：渐变的起始点坐标。
取值范围：0 到 1。
说明：x1 和 y1 定义了渐变起始点相对于渐变区域的坐标。坐标 (0, 0) 表示渐变区域的左上角，(1, 1) 表示右下角。
2. x2 和 y2
定义：渐变的结束点坐标。
取值范围：0 到 1。
说明：x2 和 y2 定义了渐变结束点相对于渐变区域的坐标。坐标 (0, 0) 表示渐变区域的左上角，(1, 1) 表示右下角。

3. stop
定义：渐变的颜色停靠点。
说明：每个 stop 定义了一个颜色及其在渐变中的位置。stop 后面跟的是渐变的位置（一个介于 0 到 1 之间的浮点值），以及对应的颜色值。例如，stop:0 rgba(255, 0, 0, 255) 表示渐变的起始点（0%）颜色为不透明的红色。
4. spread
定义：渐变的扩展方式。
PadSpread：渐变会继续填充到渐变区域的边界之外，超出部分使用边界的颜色。
RepeatSpread：渐变会重复填充，超出部分重复渐变的模式。
ReflectSpread：渐变会反射填充，超出部分呈现渐变的镜像效果。
示例1：

QLinearGradient gradient(0, 0, 1, 1);
gradient.setColorAt(0, Qt::red);
gradient.setColorAt(0.5, Qt::green);
gradient.setColorAt(1, Qt::blue);

这段代码创建了一个 QLinearGradient 对象，从渐变区域的左上角 (0, 0) 到右下角 (1, 1)。渐变开始时是红色，中间是绿色，结束时是蓝色。
示例2：
按钮的样式表：
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:0, y2:1, stop:0 red, stop:1 blue);

试着创建两个指示灯：
1、在图形界面放置两个QLabel，长宽均设为40
2、分别输入样式表：
QLabel{
   border-radius: 20px;
   border: 2px solid rgb(100, 100, 100);
   background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #bbffbb, stop: 1 #404040);
}

和：
QLabel{
   border-radius: 20px;
   border: 2px solid rgb(100, 120, 100);
   background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #ffffff, stop: 0.3 #43ff43, stop: 1 #669066);
}
显示效果：