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

        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);
}
显示效果：
 

再试一个按钮：QPushButton，输入以下样式表内容：

QPushButton{

border-top: 2px solid #f0f0f0;

border-left: 2px solid #f0f0f0;

border-right: 2px solid #303030;

border-bottom: 2px solid #303030;

background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 #b0ddb0, stop: 1 #606060);

}

QPushButton:hover{

border-top: 1px solid #f0f0f0;

border-left: 1px solid #f0f0f0;

border-right: 1px solid #303030;

border-bottom: 1px solid #303030;

background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 #c0eec0, stop: 1 #b0b0b0);

}

QPushButton:pressed{

border-top: 2px solid #303030;

border-left: 2px solid #303030;

border-right: 2px solid #f0f0f0;

border-bottom: 2px solid #f0f0f0;

background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 #e0e0e0, stop: 0.1 #60ff60, stop: 0.5 #88ff88, stop: 1 #30ff30);

}