QML: загрузка изображений в GridView

Question

Я новичок в QML и хочу загрузить несколько картинок в свое приложение. С помощью FileDialog я выбираю папку, содержащую около 1000 изображений.

Затем я хочу загрузить их в GridView. A 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 изображений, а не только для текущей страницы.

В качестве быстрого решения, я бы предложил вам определить filterOnGroup как 'filter', только если на текущей странице это GridView, например:

// 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
        }
    }
}

Кроме того, вы можете играть с sourceSize свойством Image, если фактические изображения больше, чем его предварительный просмотр (80x120 в вашем примере)