Qt Quick 在图像周围添加渐变框

Question

我正在使用 Qt 5.4.1 及其 Qt Quick 模块开发应用程序。我从 /images 目录加载了一些 .svg 图片，然后在 ListView 中显示它们，效果很好。但是，如何在每个加载的 .svg 图像周围添加阴影渐变？这是 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

好吧，您应该以某种方式将该渐变放入您的委托中。您可以：

创建一个空 Item 并将 Rectangle 和 Image 放入其中

示例：

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

或者把Image放在Rectangle

示例：

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

在这两种情况下，堆叠顺序都会在图像后面绘制渐变矩形。一个委托应该只有一个根元素，但不限于只有一个元素，你可以嵌套任意多个。

Qt Quick 在图像周围添加渐变框

Qt Quick adding gradient frame around Image

qt

qml

qtquick2