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

时间:2019-03-19 06:19:25

标签: image qt gridview qml display

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

1 个答案:

答案 0 :(得分:0)

以下是该想法的简单说明:

row.value = nil