CODEWITHSUNDEEP
qtlistviewqmlqtquick2filedialog
MJKhan
MJKhan

Reputation: 71

Create dynamic image ListElement with fileUrl using QML

I am new to QML programming. I want to create dynamic images as ListElements in ListModel, upon clicking the "open" button of a FileDialog. My problem is that upon adding second image the first image is also replaced by the second image. How can I individually update the Images inside a ListElement? Here is my code:

  Component{
    id:delegate
    Item{
        height: 100
        visible: true
        width :100

        Rectangle{
            id: list
            height: 100
            width:height
            color : "#20292A"
            border.color: "#3A8A86"
            border.width: 4
            radius: 3
            visible:true
            Image{
                x: 3
                y: 3
                height : 95
                visible: true
                width : height
                source:mod[index]//fileDialog.fileUrl

            }
        }
    }
}
ListModel{
    id:mod
}
Rectangle{
    id:listdata
    x: 180
    y: 577
    height: 100
    width:841
    color : "#20292A"
    border.color: "#3A8A86"
    border.width: 4
    radius: 3
    visible:true

    Row{
        y: 4
        height:90
        width:841
        anchors.fill: list
        spacing: 50
        visible: true

        ListView{
            id:view
            x: 193
            y: 1
            width: 841
            height: 90
            model:mod
            clip: true
            delegate: delegate
            anchors.fill: listdata
            anchors.bottomMargin: 78
            visible: true
            interactive: true
            anchors.leftMargin: 190
            anchors.left: window.left
            anchors.bottom: window.bottom

            orientation: Qt.Horizontal
            layoutDirection : Qt.LeftToRight
            anchors.horizontalCenter: window
            anchors.verticalCenter: window
            spacing: 50


        }
    }   
}    

FileDialog {
            id: fileDialog
            selectExisting: fileDialogSelectExisting.checked

            modality: fileDialogModal.checked ? Qt.WindowModal : Qt.NonModal
            title: "Please choose a file"
            onAccepted: {
                console.log("You chose: " + fileDialog.fileUrls)
                mod.append(fileDialog.fileUrls)
            }
            onRejected: {
                console.log("Canceled")
                Qt.quit()
          }
        }

Upvotes: 1

Views: 1673

Answers (1)

dfranca
dfranca

Reputation: 5322

The QML ListModel expects a JSON dictionary at append http://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html

And it's not a container, so you can't access an index of an array.

To make it works you first need to change your append function to store a json:

mod.append({"fileUrl": fileDialog.fileUrl.toString()})

Then you can access the element in your delegate calling by its JSON name:

source: fileUrl

You don't need to worry about the index position inside a delegate, it'll always access the current element.

Upvotes: 2

Related Questions