使用 QML 创建带有 fileUrl 的动态图像 ListElement

Question

我是 QML 编程新手。单击 FileDialog 的 "open" 按钮后，我想在 ListModel 中将动态图像创建为 ListElements。我的问题是，在添加第二张图片后，第一张图片也被第二张图片取代。如何单独更新 ListElement 中的 Image？这是我的代码：

  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()
          }
        }

Answer 1

QML ListModel 在 append 处需要一个 JSON 字典 http://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html

而且它不是容器，因此您无法访问数组的索引。

要使其正常工作，您首先需要更改追加函数以存储 json:

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

然后您可以通过其 JSON 名称访问委托调用中的元素：

source: fileUrl

您无需担心委托中的索引位置，它始终会访问当前元素。

使用 QML 创建带有 fileUrl 的动态图像 ListElement

Create dynamic image ListElement with fileUrl using QML

qt

listview

filedialog

qml

qtquick2