Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Displaying multiple images using GridView
Forum Updated to NodeBB v4.3 + New Features

Displaying multiple images using GridView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 742 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mohamab29
    wrote on last edited by
    #1

    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{}
            }
        }
    
    1 Reply Last reply
    0
    • MarkkyboyM Offline
      MarkkyboyM Offline
      Markkyboy
      wrote on last edited by
      #2

      Related: https://forum.qt.io/topic/100924/how-to-display-the-images-in-gridview-in-descending-order

      Don't just sit there standing around, pick up a shovel and sweep up!

      I live by the sea, not in it.

      M 1 Reply Last reply
      0
      • MarkkyboyM Markkyboy

        Related: https://forum.qt.io/topic/100924/how-to-display-the-images-in-gridview-in-descending-order

        M Offline
        M Offline
        Mohamab29
        wrote on last edited by Mohamab29
        #3

        @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

        1 Reply Last reply
        0
        • M Offline
          M Offline
          Mohamab29
          wrote on last edited by
          #4

          it has been solved :)

          https://stackoverflow.com/questions/66139807/displaying-multiple-images-using-qml-in-gridview

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved