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科學計算庫