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

[AdrianJade]

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!

[Shrinidhi Upadhyaya]

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].

[AdrianJade]

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

[J.Hilk]

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

[AdrianJade]

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

[J.Hilk]

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

[Shrinidhi Upadhyaya]

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()
            }
        }
    }
}

[AdrianJade]

@Shrinidhi-Upadhyaya , Thank you for your help