Как отобразить увеличенную версию выбранного изображения в GridView при нажатии на него в QML

Question

Я пытаюсь отобразить увеличенную версию изображения в GridView, когда на него нажимают, и когда я нажимаю кнопку esc, он возвращает меня в GridView изображений, но я не могу найти способ отобразитьэто в QML, это мой код:

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

Answer 1

Вот простая иллюстрация идеи:

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Images test")

    GridLayout
    {
        width: 303
        height: 303
        anchors.centerIn: parent
        columns: 3
        rowSpacing: 1
        columnSpacing: 1
        Repeater {
            model: 9
            delegate: Item {
                id: container
                width: 100
                height: 100
                z: img.state == "preview" ? 1 : 2
                Image {
                    id: img
                    cache: false
                    width: parent.width
                    height: parent.height
                    anchors.centerIn: parent
                    source: "https://picsum.photos/200/200&r=" + Math.random()
                    fillMode: Image.PreserveAspectFit
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            img.state = img.state == "preview" ? "full" : "preview";
                        }
                    }
                    state: "preview"
                    states: [
                        State {
                            name: "preview"
                            PropertyChanges { target: img; width: 100; height: 100; }
                        },
                        State {
                            name: "full"
                            PropertyChanges { target: img; width: 200; height: 200; }
                        }
                    ]
                    transitions: Transition {
                        PropertyAnimation { properties: "width,height"; duration: 1000; easing.type: Easing.OutBack }
                    }
                }
            }
        }
    }
}