分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
Qt Quick提供了三种渐变图形效果：
GradientExample.qml 会被示例框架（参看 Qt Quick里的图形效果（Graphical Effects））动态加载，它使用了三个 Row 定位器来布局每个小示例。下面我们简单介绍一下每种渐变元素。
LinearGradient 是 Item 的派生类，我设置了它从 Item 继承来的属性 width 和 height ，其它属性都介绍过了，对照着看看就明白了，效果就是图 1 中第一行左面那个图了。
如你所见，我们使用 Image 来显示一个图片： butterfly.png 。使用 LinearGradient 来生成一个叠加了渐变效果的新元素。这是需要注意的哦，当我们为 LinearGradient 指定了 source 属性时，Qt Quick会在 source 指定的元素上应用渐变效果，生成一个新的元素，而原对象不会被改变。
- ConicalGradient，锥形渐变
- LinearGradient，线性渐变
- RadialGradient，径向渐变
效果
下图是我设计的示例效果：
图 1 渐变图形效果
如图所示，第一行为线性渐变，第二行为锥形渐变，第三行为径向渐变。
渐变元素与其他图形效果元素不同之处在于：渐变元素既可以用来改变一个已有的元素（如Image），也有可以独立使用。如你在示例效果图中看到的那样，每一行前两个是独立使用渐变元素的效果，后两个是讲渐变效果应用到其它元素上的效果。
源码
渐变效果较为简单，所有的示例都放在一个 qml 文档—— GradientExample.qml ——中，内容如下：
扫描二维码关注公众号，回复：
4955497 查看本文章
import QtQuick 2.2import QtGraphicalEffects 1.0import QtQuick.Controls 1.2Rectangle { 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）
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
