在 GridView 中使用 QML 显示多张图片

Question

我已经使用文件对话框 select 多个图像，如下所示：

    FileDialog{
        id: uploadFiles
        title: "Please choose images for dimple detection"
        selectMultiple: true
        nameFilters: [ "Image files (*.jpg *.png *.tif)", "All files (*)" ]
        onAccepted: {}
        }

我知道我可以使用以下方式访问文件路径：

uplaodFile.fileUrls

但是如何使用 GridView 在 Flickable 项中显示它们？

编辑： 这是页面的完整代码...

import QtQuick 2.15
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Dialogs 1.3
Item {
property bool isGridViewVisiable: false
Rectangle {
    id: bgHome
    color: "#2c313c"
    anchors.fill: parent

    Flickable{
        id: flickableUpload
        anchors.fill: parent
        clip: true

        Text {
            id: titleResults
            x: 249
            width: 347
            height: 141
            color: "#ffffff"
            text: qsTr("Upload the images to here please :)")
            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.top
            font.pixelSize: 25
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.verticalCenterOffset: -110
            anchors.horizontalCenterOffset: 8
            anchors.topMargin: 59
            anchors.horizontalCenter: parent.horizontalCenter
            font.family: "Arial"
            font.bold: true
            minimumPointSize: 15
            minimumPixelSize: 16
            fontSizeMode: Text.Fit
        }
        UploadBtn{
            id:uploadBtn
            x: 285
            y: 220
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            btnIconSource: "../../images/svg_images/upload-icon.svg"
            onPressed: {
                uploadFiles.open()
            }
            // opening a file dialog in order to upload the images
            FileDialog{
                id: uploadFiles
                title: "Please choose images for dimple detection"
                selectMultiple: true
                nameFilters: [ "Image files (*.jpg *.png *.tif)", "All files (*)" ]
                onAccepted: {
                    isGridViewVisiable = true
                }
            }
            Component {
                id: nameDelegate
                Column {
                    Image {
                        id: delegateImage
                        anchors.horizontalCenter: delegateText.horizontalCenter
                        source: model; width: 256; height: 256; smooth: true
                        fillMode: Image.PreserveAspectFit
                    }
                    Text {
                        id: delegateText
                        text: model.name; font.pixelSize: 24
                    }
                }
            }
            GridView{
                id:gridView
                visible: isGridViewVisiable
                anchors.fill: parent
                model:uploadFiles.fileUrls
                delegate: nameDelegate
                clip: true
            }
        }
        ScrollBar.vertical: ScrollBar{}
    }
}

这是我将添加到主 qml 文件中的内容加载器的完整页面

PS: 上传按钮是自定义按钮

Answer 1

uploadFiles.fileUrls 是一个文件名数组。因此，您可以将其用作 GridView.

的模型

GridView {
    model: uploadFiles.fileUrls

    delegate: Image {
        source: modelData
    }
}

更新:

事实证明我的原始答案有问题，您尝试的代码也有问题。

首先，您要使 GridView 成为 UploadBtn 的 child。你是故意的吗？我认为 space 太小无法绘制图像。

但更重要的是，我错误的部分是 fileUrls 不是字符串数组。这是一个list<url>。我假设 QML 足够聪明，可以将其视为数组，或者在需要时将其隐式转换为数组。但显然我错了。所以我们只需要稍微不同地使用它。

    Flickable{
        ...

        UploadBtn {
            id:uploadBtn
            ...

            FileDialog{
                ...
            }
            Component {
                id: nameDelegate
                Column {
                    Image {
                        ...

                        // Access the list by index
                        source: uploadFiles.fileUrls[index]
                    }
                    Text {
                        ...

                        text: uploadFiles.fileUrls[index]
                    }
                }
            }
        }

        // Move GridView outside of UploadBtn
        GridView {
            ...

            // Just use the length of the list as our model
            model: uploadFiles.fileUrls.length
        }
    }

在 GridView 中使用 QML 显示多张图片

Displaying multiple images using QML in GridView

qt

qml

qtquick2