QML：在GridView中加载图像

Question

我是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
                }
            }
        }

    }
}

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

谢谢并恭祝安康，

埃迪

Answer 1

问题是您不仅要为当前页面加载所有1000张图像。

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

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

另一种方法是使用Loader作为一个代表SwipeView并设置其sourceComponent到gridView ，如果它是当前或以其他方式为空。

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

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