Qt World Summit: Submit your Presentation

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
                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
                    x: 285
                    y: 220
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    btnIconSource: "../../images/svg_images/upload-icon.svg"
                    onPressed: {
                    // opening a file dialog in order to upload the images
                        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
                        visible: isGridViewVisiable
                        anchors.fill: parent
                        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