qml漸變和圖像

圖像填充模式、邊界圖檔、加載網絡圖像、動态圖像、縮放（縮放，大于1放大，小于1縮小，為負數的時候鏡像顯示，繼承自Item的元素都有這個屬性）、旋轉、平移圖像，一般的垂直方向的漸變、線性漸變、錐形漸變、徑向漸變以及以圖像為源的漸變。

main.cpp

#include <QGuiApplication>
#include <QQuickView>
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QQuickView viewer;
    viewer.setSource(QUrl("qrc:/main.qml"));
    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
    viewer.show();
    return app.exec();
}
           

main.qml

import QtQuick 
import QtQuick.Controls 
import QtQuick.Layouts 
//使用線性、錐形、徑向漸變等需要包含
import QtGraphicalEffects 
Rectangle
{
    id:root
    visible: true
    width: 
    height: 
    color:"lightgray"
    //圖檔
    Image
    {
        z:
        width:
        height:
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        source: "qrc:/關于.png"
        //填充方式 平鋪
        fillMode: Image.Tile
    }
    //加載網絡資源
    Image
    {
        z:
        anchors.fill: parent
        scale: 
        source: "http://www.baidu.com/img/bd_logo1.png"
        fillMode: Image.Pad
        //加載狀态
        onStatusChanged:
        {
            if(status == Image.Ready)
            {
                //加載完成後銷毀
                text1.text = "加載完成"
                text1.destroy()
            }
            else if(status == Image.Loading)
                text1.text = "正在加載"
        }
        Text
        {
            id:text1
            anchors.centerIn: parent
            font{family: "微軟雅黑";pointSize: }
        }
    }
    //邊界圖檔，分區域縮放
    BorderImage
    {
        anchors.bottom: parent.bottom
        width: parent.height/; height: parent.height/
        border{left:;top:;right:;bottom: }
        source: "qrc:/關機.png"
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }
    //動态圖檔 gif等
    AnimatedImage
    {
        anchors.verticalCenter: parent.verticalCenter
        //縮放遠點，取值為Center、Top、BottomLeft等
        transformOrigin: "Center"
        //縮放，大于1放大，小于1縮小，為負數的時候鏡像顯示，繼承自Item的元素都有這個屬性
        scale: -
        //旋轉角度，繼承自Item的元素都有這個屬性
        rotation: 
        source: "qrc:/gif.gif"
        //平移
        transform: Translate{y:;x:}
    }
    //各種漸變
    Row
    {
        z:
        anchors.top:parent.top
        anchors.topMargin: 
        anchors.left: parent.left
        anchors.leftMargin: 
        spacing: 
        //一般的漸變，垂直方向
        Rectangle
        {
            width:root.width/
            height:root.width/
            gradient: Gradient
            {
                GradientStop
                {
                position: ;
                color: "#c0db0e";
                }
                GradientStop
                {
                    position: ;
                    color: "#db16c1";
                }
            }
        }
        //線性漸變
        LinearGradient
        {
            width:root.width/
            height:root.width/
            gradient: Gradient
            {
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"green"}
                GradientStop{position:;color:"red"}
            }
            //相對位置
            start:Qt.point(,)
            end:Qt.point(root.width/,root.width/)
        }
        //線性漸變 source
        LinearGradient
        {
            source: Image {source: "qrc:/關于.png"}
            width:root.width/
            height:root.width/
            gradient: Gradient
            {
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"green"}
                GradientStop{position:;color:"red"}
            }
            start:Qt.point(,)
            end:Qt.point(root.width/,root.width/)
        }
        //錐形漸變
        ConicalGradient
        {
            width:root.width/
            height:root.width/
            //角度
            angle:
            gradient: Gradient
            {
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"red"}
            }
            horizontalOffset: -
            verticalOffset: -
        }
        //source
        ConicalGradient
        {
            source: Image {source: "qrc:/關于.png"}
            width:root.width/
            height:root.width/
            //角度
            angle:
            gradient: Gradient
            {
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"green"}
                GradientStop{position:;color:"red"}
            }
        }
        //徑向漸變
        RadialGradient
        {
            width:root.width/
            height:root.width/
            gradient: Gradient
            {
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"green"}
                GradientStop{position:;color:"red"}
            }
            horizontalOffset: -
            verticalOffset: -
            angle:
        }
        RadialGradient
        {
            source: Image {source: "qrc:/關于.png"}
            width:root.width/
            height:root.width/
            gradient: Gradient
            {
                GradientStop{position:;color:"red"}
                GradientStop{position:;color:"green"}
                GradientStop{position:;color:"blue"}
                GradientStop{position:;color:"yellow"}
                GradientStop{position:;color:"gray"}
                GradientStop{position:;color:"pink"}
            }
        }
    }
}
           

效果：

代碼：https://github.com/yangyang0312/cpp/tree/master/Qt/qml/ImageAndGradient