Qt World Summit: Register Today!

Overlapping images in ListView QML

  • I want ListView to take images from the FolderListModel and display them sequentially on the screen. FolderListModel uses FileDialog to take an images from the folder specified by the user:

    import QtQuick.Controls 1.3
    import QtQuick 2.6
    import QtQuick.Dialogs 1.0
    import QtQuick.Window 2.1
    import Qt.labs.folderlistmodel 1.0
    ApplicationWindow {
    visible: true
    title: "Test"
    width: 400
    height: 1000
    Button {
        id: but
          text: "Chose folder"
          onClicked: fileDialog.open()
    FileDialog {
        id: fileDialog
        title: "Choose a folder with some images"
        selectFolder: true
        folder: picturesLocation
        onAccepted: {
            folderModel.folder = fileUrl + "/";
    FolderListModel {
        id: folderModel
        objectName: "folderModel"
        showDirs: false
        nameFilters: imageNameFilters
    ListView {
        id: listview
        anchors.fill: parent
        visible: false
        Component {
            id: fileDelegate
            Image {
                id: image
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                source: folderModel.folder + fileName
                antialiasing: true
        model: folderModel
        delegate: fileDelegate

    After starting the program, I select the folder where the files are stored .jpg images (3 small squares of different colors).

    What I approximately want to see:


    What the program prints:


Log in to reply