在 QML 中单击时如何在 GridView 中显示所选图像的放大版本

Question

我试图在单击 GridView 时在 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 }
                    }
                }
            }
        }
    }
}

在 QML 中单击时如何在 GridView 中显示所选图像的放大版本

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

qt

gridview

image

qml

display