在QML中单击时，如何在GridView中显示较大版本的选定图像

Question

我正在尝试在单击GridView中显示较大版本的图像，当我按下ESC按钮时，它会将我带回图像的GridView，但我可以't找到一种方法如何在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 }
                    }
                }
            }
        }
    }
}