【QT】QLinearGradient 线性渐变类简单使用教程

目录

0.简介

1）qtDesigner中

2）实际执行

1.功能详述

3.举一反三的样式

0.简介

QLinearGradient 是 Qt 框架中的一个类，用于定义线性渐变效果（通过样式表设置）。它可以用来填充形状、背景或其他图形元素，创建从一个颜色到另一个颜色的平滑过渡效果。

先看下实现效果（我用了一个label控件承接，一个从浅灰到深灰的渐变，带50的圆角）

1）qtDesigner中

2）实际执行

想要彩色？满足你

1.功能详述

1）首先我们看下用样式是如何设置的（以下均已彩色图的颜色为准）

ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);"
                         "border-radius:50px;");

重点就是这一句代码，设置样式。

通过给label设置一个背景颜色，再加一个border-radius的圆角即可实现，重点是qlineargradient的参数，我们来分析下：

qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue)

别看参数这么多，分组看就好了，一共有5个组：

a）起始点坐标（x1,y1）

b）结束点坐标（x2,y2）

c）起始点颜色和开始点（stop:0.0 red）

d）中间段颜色和中间点（stop:0.5 green）

e）结束点颜色和结束点（stop:1 blue）

（参考图）

也就是先看起点终点，再看颜色。

如上述代码样式可简述为：从右上到左下，分别是红、绿、蓝三个颜色。

3.举一反三的样式

1）如果要调换开始和结束的颜色（红蓝调换），有两种方式：

        i）调换起始点：

        （x1,y1），原（1，0）变为（0，1）+ （x2,y2），原（0，1）变为（1，0）

        ii）调换起点（red）和终点（blue）的颜色

2）我想让红色少一点

第二段stop的值少一点，意思是绿色的中心点是0.2

//    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);"
    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.2 green, stop:1 blue);"
                             "border-radius:50px;");

3）如果我只想要两个颜色，不想要中间的绿色了

去掉第二段stop参数（, stop:0.5 green）即可

//    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);"
    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red,stop:1 blue);"
                             "border-radius:50px;");

大家可自行发挥想象力，可以创造出很多样式

--END--