如何在 listView 中附加并显示多个 FileDialog 文件？答案

【问题标题】：How to append and make visible multiple FileDialog files in listView?如何在 listView 中附加并显示多个 FileDialog 文件？
【发布时间】：2015-05-12 22:43:56
【问题描述】：

我的问题是当我使用 fileDialog 选择单个图像时，图像项矩形在 ListView 中可见，但图像本身不可见。此外，当我选择多个图像时，ListView 中仅添加单个图像项。

我想在从 FileDialog 选择到 ListView 和 ListView 模型时附加并显示单个和多个图像。

这是我的代码

      FileDialog {
                id: fileDialog
                title: "Please choose a file"
                selectExisting: true
                selectMultiple: true
                onAccepted: {
                    var path
                    console.log("You chose: " + fileDialog.fileUrls)
                    mod.append({"fileUrl": fileDialog.fileUrls.toString()})
                                       }
                onRejected: {
                           Qt.quit()
                }
            }

这是 ListModel 和 ListView 的代码

ListModel{
        id: mod
    }
    Item{
        id:listviewrec
        width: 120
        height: 652
        visible: true
        anchors.right: root.right
        y :80
        ListView{
            id:modlistview
            x: 3
            boundsBehavior: Flickable.StopAtBounds
            highlightRangeMode: ListView.StrictlyEnforceRange
            clip: true
            flickableDirection: Flickable.VerticalFlick
            spacing:25
            model:mod
            delegate: delegateimage
            orientation: Qt.Vertical
            anchors.fill: listviewrec
        }

这就是我委派图像的方式

 Component{

        id:delegateimage
        Item{
            id:imageitem
            width:60
          height:70
         Rectangle{
                id:imagerec
                x:24
                y:10
                width: 66
                height:77
                border.color: "#7CC7FF"
                color: "transparent"
                border.width: 3
                radius: 2
                visible:true
                Image{
                    id : img
                    x: 4
                    y: 4
                    height : 69
                    visible: true
                   width : 59
                  function upload(){
                          for(var i = 0; i<fileDialog.fileUrls.length ; i++){
                           mod.append({"fileUrl": fileDialog.fileUrls[i].toString()})
                          img.source = fileDialog.fileUrl
                      }
                        }

它是这样显示的

https://drive.google.com/file/d/0Bz-y0XAfUMXHNGJfNTBVNnB6MXM/view?usp=sharing

【问题讨论】：

标签： qt listview qml filedialog

【解决方案1】：

FileDialog.fileUrls 是选定文件的列表。您应该将列表中的所有文件附加到模型而不是附加 fileUrls 字符串：

FileDialog {
    onAccepted: {
        for (var index = 0; index < fileUrls.length; index++){
            mod.append({"fileUrl": fileDialog.fileUrls[index]});
        }
    }
}

现在，ListModel mod 将选定的文件存储在 fileUrl 角色中。访问代理中的角色以显示图像：

Component {
    id:delegateimage
    Item {
        //...
        Rectangle {
            //...
            Image {
                //...
                source: fileUrl
            }
        }
    }
}

【讨论】：