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

How to display a larger version of selected image in GridView when it is clicked in QML?



  • I am trying to display a larger version of image inside the GridView when it is clicked, and when I pressed esc button, it will bring me back in the GridView of images, but I can't find a way how to display it in QML, This is my code:

    import QtQuick 2.9
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    import Qt.labs.folderlistmodel 1.0
    import QtQuick.Controls 1.1
    import QtQml.Models 2.1
    
    import "qrc:/assets/."
    
    Rectangle {
    visible: true
    
    Item {
        id: theAboveList
    }
    
    GridView {
        interactive: false
        id: gridView
    
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            leftMargin: 5
            topMargin: 5
        }
    
        cellWidth: width / 2
        cellHeight: height / 2
    
        model: folderModel
        delegate: fileDelegate
    
        FolderListModel {
            id: folderModel
            nameFilters: ["*.jpg"]
            folder: "file:///E:/QT Projects/ImageViewer/image"
        }
    
        Component {
            id: fileDelegate
    
            Item {
                Image {
                    width: gridView.cellWidth - 5
                    height: gridView.cellHeight - 5
                    smooth: true
                    source: fileURL
                 }
             }
        }
    
        anchors
        {
            left: parent.left
            top: theAboveList.bottom
            right: parent.right
            bottom: parent.bottom
        }
    
        verticalLayoutDirection: GridView.BottomToTop
        clip: true
    
        header: Item {}
        onContentHeightChanged: {
            if (contentHeight < height) {
                headerItem.height += (height - contentHeight)
            }
            currentIndex = count-1
            positionViewAtEnd()
        }
    
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
    
            [ This is where I want to show the clicked image ]
        }
      }
    }
    

    Please Help me, I am new to QML , Thank you in advance!



  • Hi @AdrianJade ,i guess you want to have a functionality just like when in Android Phones you open gallery , you are able to view a lot of photos and once you click on them you can see the photo completely,you can do one thing when you click on the image you can open open a popup or an item(add animation) which is completely covered with the image.You can give the popup/item required height you want. And regarding the "esc" button functionality you can handle the keyboard events,
    you can have a look into this[https://doc.qt.io/qt-5/qml-qtquick-keys.html].



  • Hi @Shrinidhi-Upadhyaya , Thank you for your quick response for my answer, Yes something like that functionality of the typical phone gallery, However, can you please Help me show some example code on how to do that idea particularly in showing the selected image by open a popup or an item? Thank you so much for your help, Highly appreciated


  • Moderators

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    ApplicationWindow {
      visible:true
      width:500; height:500
    
    
      Item {
          id: frame
          anchors.fill: parent
          GridView{
              id:gView
              anchors.fill: parent
    
              model: ["qrc:/Icon1.png", "qrc:/Icon2.png", "qrc:/Icon3.png", "qrc:/Icon4.png",
                        "qrc:/Icon5.png", "qrc:/Icon6.png", "qrc:/Icon7.png", "qrc:/Icon8.png"]
              cellWidth: width / 2
                  cellHeight: height / 2
    
              delegate: Image {
                  source: modelData
    
    
                  MouseArea{
                      anchors.fill: parent
                      onClicked: preview.source = modelData
                  }
              }
          }
    
          Image {
              id: preview
              source: ""
    
              anchors.centerIn: parent
    
              width: source != "" ? parent.width *3 /4 : 0
              height: source != "" ? parent.height *3 /4 : 0
    
              Behavior on width {
                  NumberAnimation{duration: 200}
              }
              Behavior on height {
                  NumberAnimation{duration: 200}
              }
    
              focus: true
              Keys.onPressed: {
                  if (event.key == Qt.Key_Escape) {
                      preview.source = ""
                      event.accepted = true;
                  }
              }
          }
      }
    }
    

    Edit. fixed the example, ShortCut was the wrong key filter



  • @J.Hilk , Thank you so much for your response, I will try this


  • Moderators

    @AdrianJade
    use the updated version, ShortCuts is probably the wrong tool for this, the Keys.onPressed event its what should be used.



  • Hi @AdrianJade , here you go:-

    Rectangle {
        id: bigRect
    
        height: visible ? parent.height / 2 : 0
        width: visible ? parent.width / 1.4 : 0
        color: "cyan"
        border.color: "black"
        anchors.centerIn: parent
        visible: false
    
        Behavior on width {
            NumberAnimation {
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    
        Behavior on height {
            NumberAnimation {
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    
        Keys.onEscapePressed: {
            bigRect.visible = false
            smallRectGrid.visible = true
            smallRectGrid.forceActiveFocus()
        }
    }
    
    GridView {
        id: smallRectGrid
    
        width: 300
        height: 200
        cellWidth: 50
        cellHeight: 50
        model: 10
        anchors.centerIn: parent
    
        Behavior on height {
            NumberAnimation {
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    
        delegate: Rectangle {
            height: visible ? 50 : 0
            width: visible ? 50 : 0
            color: "cyan"
            border.color: "black"
    
            Behavior on width {
                NumberAnimation {
                    duration: 400
                    easing.type: Easing.InOutQuad
                }
            }
    
            MouseArea {
                anchors.fill: parent
    
                onClicked:  {
                    smallRectGrid.visible = false
                    bigRect.visible = true
                    bigRect.forceActiveFocus()
                }
            }
        }
    }


  • @Shrinidhi-Upadhyaya , Thank you for your help


Log in to reply