Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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 + "/";
            but.visible=false;
            listview.visible=true;
        }
    }
    
    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:

    exp.png

    What the program prints:

    out.png




Log in to reply