Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Displaying multiple images using GridView



  • I'm trying to get multiple images using FileDialog and selecting one or more pictures from a folder .
    after that I'm having a hard time displaying them in a grid view , I've searched and haven't found something similar so I would appreciate if some one can guide me on what to do or what should I change or where can I find something similar to my problem ...

    This the code that I'm using in the page

    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{}
            }
        }
    




  • @Markkyboy The problem is that he is using Folder list which is different in my case because I'm using only file Dialogs in order to get one or more pictures




Log in to reply