QML: загружать изображения в GridView

Я новичок в 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.info("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
                }
            }
        }

    }
}

Если кто-нибудь может мне помочь, буду счастлив.

Спасибо и привет,

Эдди

image performance qt qml

02.07.2018 16:09

Применение градиента к изображению с помощью CSS

Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования...

Получение URL-адреса изображения курса в Moodle с помощью PHP

Moodle - это популярная система управления обучением с открытым исходным кодом, используемая многими учебными заведениями и организациями по всему...

783

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
        }
    }
}

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

Большое спасибо за вашу помощь! Я почти на месте, у меня проблема, что на всех страницах SwipeView я получаю одинаковые 40 изображений? Вы можете помочь мне?

— 05.07.2018 14:11

Конечно, но было бы проще, если бы вы показали код, который у вас есть сейчас.

— 05.07.2018 14:46

02.07.2018 18:23