Qt Quick adding gradient frame around Image

Question

I am working on application using Qt 5.4.1 and its Qt Quick module. I load some .svg pictures from /images directory and then show them in ListView, which works ok. But, how do I add shadow gradient around every loaded .svg image? Here is MWE:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

import Qt.labs.folderlistmodel 2.1

Rectangle
{
    id: ueMainWindow

    visible: true

    width: 800
    height: 1280

    color: "black"

    property string ueRootDirectory:"/images"
    property real ueImagesLoadProgress;
    property bool ueImageLoading;

    Rectangle
    {
        id: ueContainerThumbnails

        antialiasing: true

        color: "black"

        anchors.bottom: ueMainWindow.bottom
        width: ueMainWindow.width

        height: 256

        gradient: Gradient
        {
            GradientStop { position: 0.0; color: "black" }
            GradientStop { position: 1.0; color: "grey" }
        }

        Text
        {
            id: ueTextImageName

            antialiasing: true

            color: "white"

            anchors.horizontalCenter: ueContainerThumbnails.horizontalCenter

            text: qsTr("TestApp")
        }

        ListView
        {
            id: ueViewThumbnails

            antialiasing: true

            orientation: ListView.Horizontal

            anchors
            {
                topMargin: parent.height-(parent.height-50)
                fill: parent
            }

            FolderListModel
            {
                id: ueModelImages

                folder: "file://"+ueRootDirectory
                nameFilters: ["*.svg"]
            }

            Component
            {
                id: ueDelegateImage

                Image
                {
                    id: ueImage

                    source: ueModelImages.folder + "/" + fileName

                    antialiasing: true

                    asynchronous: true

                    horizontalAlignment: Image.AlignHCenter
                    verticalAlignment: Image.AlignVCenter

                    width: 192
                    height: 192

                    fillMode: Image.PreserveAspectFit
                }
            }

            focus: true
            spacing: 10
            leftMargin: 10
            rightMargin: 35
            visible: ueModelImages.status==FolderListModel.Ready

            model: ueModelImages
            delegate: ueDelegateImage
        }
    }
}

Answer 1

Well, you should put that gradient into your delegate somehow. You can either:

• create an empty Item and put the Rectangle and Image inside it

example:

Component {
    id: ueDelegateImage
    Item { // container
        Rectangle {
            // gradient rectangle
        }
        Image {
            // image
        }
    }
}

• or put the Image inside the Rectangle

example:

Component {
    id: ueDelegateImage        
    Rectangle {
        // gradient rectangle acts as a container
        Image {
            // image
        }            
    }  
}

In both cases stacking order will draw the gradient rectangle behind the image. A delegate should only have one root element, but is not limited to just one element, you can nest as many as you like.