QML：在 GridView 中加载图像

Posted 2023-02-16

【中文标题】QML：在 GridView 中加载图像

【英文标题】：QML: Load images in GridView

【发布时间】：2018-07-02 14:09:58

【问题描述】：

我是 QML 初学者，想在我的应用程序中加载一些图片。使用FileDialog，我选择包含大约 1000 张图像的文件夹。

然后，我想将它们加载到GridView 中。 SwipeView 有助于将图像拆分为 40 个图像/屏幕。所以SwipeView 有 25 页。

现在如何在不等待 1 小时的情况下加载图像？

这是我的代码：

import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 1.0
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
import QtQuick.Dialogs 1.1
import QtQml.Models 2.1


Window
    visible: true
    width: 1000
    height: 600

    FolderListModel
        id: lm
        showDirs: false
    

    FileDialog 
        id: fileDialog
        selectFolder: true
        title: "Please choose a folder"
        folder: shortcuts.home
        onAccepted: 
            lm.folder = fileUrl+"/"
        
        onRejected: 
            console.log("Canceled")
            Qt.quit()
        
        Component.onCompleted: visible = true
    

    SwipeView 
        width: 800
        height: 500
        clip: true
        currentIndex: 0

        Repeater 
            model: Math.ceil(lm.count / 40)
            delegate: gridView
        
    
    Component
        id: gridView

        GridView
            interactive: false
            width: 800
            height: 500
            property int viewIndex: index
            model: DelegateModel 
                model: lm
                groups: DelegateModelGroup  name: 'filter' 
                Component.onCompleted: 
                    for (var i = viewIndex * 40; i < lm.count && i < (viewIndex * 40) + 40; i++) 
                        items.setGroups(i, 1, ['items', 'filter'])
                    
                

                filterOnGroup: 'filter'

                delegate: Image 
                    width: 80
                    height: 120
                    source: lm.folder+fileName
                    asynchronous: true
                
            
        

    

如果有人可以帮助我，我会很高兴。

感谢和问候，

艾迪

【参考方案1】：

问题是您正在加载所有 1000 张图像，而不仅仅是当前页面。

作为一个快速的解决方案，我建议您将filterOnGroup 定义为'filter'，前提是它在当前页面上是GridView，例如：

// note: `swipeViewId` is an id of the SwipeView
filterOnGroup: swipeViewId.currentIndex == index ? 'filter' : ''

另一种方法是使用Loader 作为SwipeView 的委托，并将其sourceComponent 设置为gridView，如果它是当前的，否则设置为null。

Repeater 
    model: Math.ceil(lm.count / 40)
    delegate: Loader 
        sourceComponent: SwipeView.isCurrentItem ? gridView : null
        onLoaded: 
            item.viewIndex = index
        
    

此外，如果实际图像大于其预览（在您的示例中为 80x120），您可以使用 Image 的 sourceSize 属性

【讨论】：

感谢您的帮助！我快到了，我有一个问题，在 SwipeView 的所有页面上我得到相同的 40 张图像？你能帮我吗？

当然可以，但是如果您显示您现在拥有的代码会更容易。