Qt / 颜色渐变 QLinearGradient、 QConicalGradient、QRadialGradient

1、QLinearGradient

background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #F0BF62, stop:1 #444444);

background:qlineargradient(
spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(0, 0, 255, 255), stop:0.33 rgba(0, 0, 0, 255),
stop:0.34 rgba(255, 30, 30, 255), stop:0.66 rgba(255, 0, 0, 255),
stop:0.67 rgba(255, 255, 0, 255), stop:1 rgba(255, 255, 0, 255));}

 

（1）spread:pad：渐变的模式为 pad，另外的两个模式为 repeat、reflect。

（2）x1、y1、x2、y2 四个坐标表示渐变的坐标范围。

（3）x1、y1 对应为左上角坐标，x2、y2 对应右下角坐标，其后面的数字是 0 和 1，表示渐变的顺序。后面的 stop 后面的数值（0 到 1 之间）就是按照数字的大小顺序确定方向来改变颜色。

（4）stop:0 rgba(0,0,255,255) 就是在坐标为 0 的点设置颜色为 rgba(0,0,255,255) 也就是蓝色；

stop:0.33 就是在坐标为 0.33 的位置改变颜色。

2、QConicalGradient

顾名思义，用于实现扇形的效果的颜色渐变。

如果是我们自己实现一种扇形的渐变效果，一般需要如下参数：

（1）扇形中心点坐标；

（2）起始渐变角度；

（3）每个扇形的起始角度和结束角度。

Qt 的实现方式与上述直观感受一样，提供了上述参数，如下：

background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0, 
stop:0.0 rgba(0, 214, 0, 255), stop:0.25 rgba(0, 0, 236, 255),
stop:0.5 rgba(255, 0, 0, 255), stop:0.75 rgba(255, 255, 0, 255),
stop:1 rgba(255, 0, 255, 255));

（1）cx、cy 是扇形的中心点坐标；

（2）angle 是扇形的起始角度；

（3）stop 则用于标注每个扇形的起始或者终止角度。0 代表 0 * 360，即 0 度，1 代表 1 * 360，即：360 度。 

（4）stop 后面接着的颜色则为该角度对应的颜色。

效果如下：

 3、QRadialGradient

background-color: qradialgradient(
spread:pad, cx:0.9, cy:0.1, radius:0.5, fx:0.1, fy:0.9, 
stop:0 rgba(255, 255, 255, 255), stop:0.1 rgba(255, 255, 255, 255), 
stop:0.2 rgba(255, 176, 176, 167), stop:0.3 rgba(255, 151, 151, 92), 
stop:0.4 rgba(255, 125, 125, 51), stop:0.5 rgba(255, 76, 76, 205), 
stop:0.52 rgba(255, 76, 76, 205), stop:0.6 rgba(255, 180, 180, 84), 
stop:1 rgba(255, 255, 255, 0))

需要的参数和 QConicalGradient 差不多，只不过多了两个参数：fx 和 fy。这两个参数是相对于整个按钮而言的，如果 fx 和 fy 分别等于 cx 和 cy，则效果图下下所示：

按照代码中效果，则如下图所示：

 

（SAW：Game Over！）