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快速在Image周围添加渐变框

1 个答案: