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

Posted 2023-02-16

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

【英文标题】：How to display a larger version of selected image in GridView when it is clicked in QML

【发布时间】：2019-03-19 06:19:24

【问题描述】：

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

【问题讨论】：

你已经做了什么？在您的代码中，我什至看不到 Image。实际上，您应该使用Image 显示图像并使用fillMode: Image.PreserveAspectFit 设置切换原点/预览来更改其大小。另外我会添加一个关于宽度/高度变化的动画以使其顺利进行。顺便说一句，您不应该在委托中包装带有 Item 的 Image，这是没有意义的。

嗨@folibis，感谢您的快速回复，我很抱歉我的代码当前的代码结构，顺便说一句，我正在尝试做的是，我有一个本地目录从我的串行相机捕获的图像中，我试图像画廊的正常功能一样将最近添加的图像显示到 GridView，但是，我陷入了这个问题，我知道这似乎是一个粗鲁的问题，但可以你请给我看一些关于这个想法的示例代码？请多多包涵，因为我是 QML 的新手，感谢您的考虑和帮助，非常感谢

【参考方案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 
                    
                
            
        
    

【讨论】：

非常感谢您的帮助