Qt Quick提供了三种渐变图形效果：

ConicalGradient，锥形渐变
LinearGradient，线性渐变
RadialGradient，径向渐变

效果

下图是我设计的示例效果：

Qt Quick里的图形效果——渐变（Gradient）效果源码

图 1 渐变图形效果

如图所示，第一行为线性渐变，第二行为锥形渐变，第三行为径向渐变。

渐变元素与其他图形效果元素不同之处在于：渐变元素既可以用来改变一个已有的元素（如Image），也有可以独立使用。如你在示例效果图中看到的那样，每一行前两个是独立使用渐变元素的效果，后两个是讲渐变效果应用到其它元素上的效果。

源码

渐变效果较为简单，所有的示例都放在一个 qml 文档—— GradientExample.qml ——中，内容如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2

Rectangle {
    id: example;
    anchors.fill: parent;
    signal back();

    Button {
        anchors.right: parent.right;
        anchors.top: parent.top;
        anchors.margins: 4;
        text: "Back";
        onClicked: example.back();
    }

    Text {
        id: linearLabel;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.margins: 4;
        text: "LinearGradient";
        font.bold: true;
    }

    Row {
        id: linears;
        anchors.left: parent.left;
        anchors.top: linearLabel.bottom;
        anchors.margins: 4;
        spacing: 8;

        LinearGradient {
            width: 100;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#80222222";}
                GradientStop{ position: 0.9; color: "#FFFFFFFF";}
            }
            start: Qt.point(0, 0);
            end: Qt.point(0, 180);
        }

        LinearGradient {
            width: 100;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#FFFF0000";}
                GradientStop{ position: 0.3; color: "#FFFFA000";}
                GradientStop{ position: 0.5; color: "#A0FF4000";}
                GradientStop{ position: 1.0; color: "#FF800FFF";}
            }
            start: Qt.point(0, 0);
            end: Qt.point(80, 180);
        }

        Image {
            id: butterfly;
            source: "butterfly.png";
            width: 180;
            height: 180;
            smooth: true;
            sourceSize: Qt.size(180, 180);
        }

        LinearGradient {
            source: butterfly;
            width: 180;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#222222";}
                GradientStop{ position: 0.9; color: "#F8884F";}
            }
            start: Qt.point(0, 0);
            end: Qt.point(180, 180);
        }
    }


    Text {
        id: conicalLabel;
        anchors.left: parent.left;
        anchors.top: linears.bottom;
        anchors.margins: 4;
        text: "ConicalGradient";
        font.bold: true;
    }

    Row {
        id: conicals;
        anchors.left: parent.left;
        anchors.top: conicalLabel.bottom;
        anchors.margins: 4;
        spacing: 8;

        ConicalGradient {
            width: 100;
            height: 180;
            angle: 45;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#80222222";}
                GradientStop{ position: 0.9; color: "#FFFFFFFF";}
            }
        }

        ConicalGradient {
            width: 100;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#FFFF0000";}
                GradientStop{ position: 0.3; color: "#FFFFA000";}
                GradientStop{ position: 0.5; color: "#A0FF4000";}
                GradientStop{ position: 1.0; color: "#FF800FFF";}
            }
            horizontalOffset: 20;
            verticalOffset: 40;
        }

        Image {
            id: conicalOrig;
            source: "butterfly.png";
            width: 180;
            height: 180;
            smooth: true;
            sourceSize: Qt.size(180, 180);
        }

        ConicalGradient {
            source: conicalOrig;
            width: 180;
            height: 180;
            angle: 60;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#A22222";}
                GradientStop{ position: 0.9; color: "#2888F4";}
            }
        }
    }


    Text {
        id: radialLabel;
        anchors.left: parent.left;
        anchors.top: conicals.bottom;
        anchors.margins: 4;
        text: "RadialGradient";
        font.bold: true;
    }

    Row {
        id: radials;
        anchors.left: parent.left;
        anchors.top: radialLabel.bottom;
        anchors.margins: 4;
        spacing: 8;

        RadialGradient {
            width: 100;
            height: 180;
            angle: 60;
            horizontalRadius: 50;
            verticalRadius: 90;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#222222";}
                GradientStop{ position: 0.9; color: "#00FF0F";}
            }
        }

        RadialGradient {
            width: 100;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#FFFF0000";}
                GradientStop{ position: 0.3; color: "#FFFFA000";}
                GradientStop{ position: 0.5; color: "#A0FF4000";}
                GradientStop{ position: 1.0; color: "#FF800FFF";}
            }
            horizontalOffset: 20;
            horizontalRadius: 40;
            verticalRadius: 40;
            verticalOffset: 40;
        }

        Image {
            id: radialOrig;
            source: "butterfly.png";
            width: 180;
            height: 180;
            smooth: true;
            sourceSize: Qt.size(180, 180);
        }

        RadialGradient {
            source: radialOrig;
            width: 180;
            height: 180;
            angle: 120;
            horizontalRadius: 40;
            verticalRadius: 80;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#A22222";}
                GradientStop{ position: 1.0; color: "#2888F4";}
            }
        }
    }
}

GradientExample.qml 会被示例框架（参看 Qt Quick里的图形效果（Graphical Effects））动态加载，它使用了三个 Row 定位器来布局每个小示例。下面我们简单介绍一下每种渐变元素。

LinearGradient

线性渐变元素（LinearGradient）有下列属性：

cached ，布尔值，指示是否缓存
start ，指定渐变开始的位置，与 end 配合，类型都是 point ，可以使用 Qt.point() 方法为其赋值，或者使用 "x,y" 这种字符串形式为其赋值，如 "0, 180" ，等价于 Qt.point(0, 180)
end ，指定渐变结束的位置，与 start 配合
gradient ，Gradient 类型的值，指定渐变色。Gradient 类用来定义一个渐变色，它只有一个属性 stops ，是列表属性，列表内的对象类型为 GradientStop 。GradientStop 假设渐变的路径从0.0开始到1.0结束，它有两个属性，一个是 position ，指定渐变路径上的某个点，另一个属性 color 指定这个点上的颜色。一个 Gradient 可以包含多个 GradientStop 。
source ，这个属性指定渐变元素要应用的来源元素，比如你要用渐变改变一张图片，就指定 source 为图片对象（Image）的 id 即可。如果你不指定，那渐变元素就自个用渐变色绘制一个图元。

有了上面的介绍，再来看示例：

LinearGradient {
            width: 100;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#80222222";}
                GradientStop{ position: 0.9; color: "#FFFFFFFF";}
            }
            start: Qt.point(0, 0);
            end: Qt.point(0, 180) ;
        }

LinearGradient 是 Item 的派生类，我设置了它从 Item 继承来的属性 width 和 height ，其它属性都介绍过了，对照着看看就明白了，效果就是图 1 中第一行左面那个图了。

下面的代码则是为 source 属性指定了一个 Image 对象：

Image {
            id: butterfly;
            source: "butterfly.png";
            width: 180;
            height: 180;
            smooth: true;
            sourceSize: Qt.size(180, 180);
        }

        LinearGradient {
            source: butterfly;
            width: 180;
            height: 180;
            gradient: Gradient {
                GradientStop{ position: 0.0; color: "#222222";}
                GradientStop{ position: 0.9; color: "#F8884F";}
            }
            start: Qt.point(0, 0);
            end: Qt.point(180, 180);
        }

如你所见，我们使用 Image 来显示一个图片： butterfly.png 。使用 LinearGradient 来生成一个叠加了渐变效果的新元素。这是需要注意的哦，当我们为 LinearGradient 指定了 source 属性时，Qt Quick会在 source 指定的元素上应用渐变效果，生成一个新的元素，而原对象不会被改变。

ConicalGradient

锥形渐变（ConicalGradient）有下列属性：

angle ，real 类型，指定渐变的起始角度，注意是度，45°，180°之类的，不是弧度哦。 Gradient 属性里的渐变起始点 0.0 处的颜色与这个角度对应。应用渐变时按照顺时针方向，随着角度变大，Gradient里的颜色也向着 1.0 这个位置变化。
cached ，不说了
gradient ，不说了
horizontalOffset ，real类型，偏离中心点的水平偏移量
verticalOffset ，real类型，偏离中心点的垂直偏移量
source ，不说了，与 LinearGradient 的 source 属性含义一样

RadialGradient

RadialGradient 是渐变元素里最复杂的了，有下列属性：

angle ，指定渐变相对于中心点的旋转角度，注意啊，这个和 ConicalGradient 的 angle 属性的含义不同哦。
cached ，略
gradient ，略
horizontalOffset ， real类型，与 ConicalGradient 的同名属性含义类似
verticalOffset ，与 ConicalGradient 的同名属性含义类似
horizontalRadius ，real类型，指定水平方向的半径，
verticalRadius ， real类型，指定垂直方向的半径，与 horizontalRadius 结合，就定义了一个椭圆了。
source ，略

好吧，结合前面的完整示例代码来看吧，不说了。

--------

回顾一下我的Qt Quick系列文章：

Qt Quick 简介
QML 语言基础
Qt Quick 之 Hello World 图文详解
Qt Quick 简单教程
Qt Quick 事件处理之信号与槽
Qt Quick事件处理之鼠标、键盘、定时器
Qt Quick 事件处理之捏拉缩放与旋转
Qt Quick 组件与对象动态创建详解
Qt Quick 布局介绍
Qt Quick 之 QML 与 C++ 混合编程详解
Qt Quick 图像处理实例之美图秀秀（附源码下载）
Qt Quick 之 PathView 详解
Qt Quick实例之挖头像
Qt Quick综合实例之文件查看器
Qt Quick调试之显示代码行号
Qt Quick实现的涂鸦程序
Qt Quick播放GIF动画
Qt Quick 中的 drag and drop（拖放）
Qt Quick里的AnimatedSprite的用法
Qt Quick里的粒子系统
Qt Quick实现的疯狂算数游戏
Qt Quick里的图形效果——混合（Blend）
Qt Quick里的图形效果——颜色（Color）

Qt Quick里的图形效果——渐变（Gradient）效果源码

效果

源码

LinearGradient

ConicalGradient

RadialGradient

继续阅读

linux下Qt调用C++库文件(.so)程序实现主要内容一、编程环境及实现方法二、项目实现三、项目中遇到的问题总结

两种解决Qt5显示中文乱码的方法（使用QStringLiteral和#pragma execution_character_set("utf-8")两种方法）两种解决Qt5显示中文乱码的方法（使用QStringLiteral和#pragma execution_character_set("utf-8")两种方法）

qt-opencv图像增强之边缘检测（多线程）1 .pro项目文件配置2 ui设计3 多线程逻辑4 Canny边缘检测和Laplace算子5 主要代码6 运行结果

DLP面曝光3D打印机模型数据矫正

基于QT的UDP网络聊天室（QQ界面）

Qt应用程序“xxx.exe 已停止工作故障模块msvcr120.dll”

widget，MainWindow和Dialog的选择使用

openssl库实现rsa加解密1、已知公钥密钥进行加密和解密

QT解压缩文件

2021-08-20环境：

嵌入式Linux开发，Qt开发界面中，不显示鼠标箭头

qt鼠标隐藏

关于QT4程序在ARM中运行鼠标擦除界面导致花屏的一个解决办法

qt中隐藏鼠标

（1）如何快速的在指定文件夹打开命令行？（1）如何快速的在指定文件夹打开命令行？

Windows系统Qt5/mingw-64配置GSL科学计算库