Блог

Я использовал диалоговое окно file для выбора нескольких изображений, подобных этому :

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

Я знаю, что могу найти пути к файлам, используя:

 uplaodFile.fileUrls 
 

но как я могу отобразить их в изменяемом элементе с помощью GridView?

Редактировать: это полный код страницы …

 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: кнопка загрузки — это настраиваемая кнопка

uploadFiles.fileUrls представляет собой массив имен файлов. Таким образом, вы можете использовать это в качестве модели для вашего GridView .

 GridView {
    model: uploadFiles.fileUrls

    delegate: Image {
        source: modelData
    }
}
 

Обновить:

Оказывается, была проблема с моим первоначальным ответом, а также с кодом, который вы пытались.

Прежде всего, вы делаете своего GridView ребенка своим UploadBtn . Вы это намеревались? Я думаю, что это будет слишком мало места для рисования ваших изображений.

Но что более важно, часть, в которой я ошибался, заключается в том, что 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
        }
    }