如何从QML中的FolderListModel中逐个获取文件？

Question

以下代码的用意是让用户选择一个照片文件夹，然后逐个显示这些照片。

PhotoViewer.qml

import QtQuick 2.0 
import QtQuick.Dialogs 1.0   // FileDialog 
import Qt.labs.folderlistmodel 2.1 // FolderListModel 

Item 
{ 
    id: head 
    property url path 

    property int i: 0 

    height: 500; width: 500 
    FileDialog 
    { 
     id:    photoDirectoryFileDialog 
     title:   "Select the photo directory:" 
     selectFolder: true 
     visible:  true 
     height:   parent.height; width: parent.width 
     onAccepted:  head.path = fileUrl 
    } 

    ListView 
    { 
     FolderListModel 
     { 
      id: folderModel 
      folder: photoDirectoryFileDialog.fileUrl 
      nameFilters: ["*.jpg"] 
     } 

     Component 
     { 
      id: fileDelegate 
      Text { text: fileName } 
     } 

     model: folderModel 
     delegate: fileDelegate 
    } 

    // Show photos 
    Image 
    { 
     id: image 
     source: "" 
    } 

    MouseArea 
    { 
     anchors.fill: parent 
     onClicked: 
     { 
      console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.fileName)) 
      image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.folder.fileName) 
      i++ 
     } 
    } 
} 

---

main.qml

import QtQuick 2.4 
import QtQuick.Window 2.2 

Window 
{ 
    id: rootWindow 
    visible: true 
    height: 700; width: height 

    PhotoViewer 
    { 
     height: rootWindow.height; width: rootWindow.width 
    }  
} 

输出：

QML debugging is enabled. Only use this in a safe environment. 
qml: fsdfsdf: 0 --- file:///home/***/Pictures/Wallpapers/undefined 
qrc:/PhotoViewer.qml:43:5: QML Image: Cannot open: file:///home/***/Pictures/Wallpapers/undefined 
qml: fsdfsdf: 1 --- file:///home/***/Pictures/Wallpapers/undefined 
qml: fsdfsdf: 2 --- file:///home/***/Pictures/Wallpapers/undefined 

正如您在输出中看到的那样，我在输出中收到“undefined”作为文件名。如何从QML中的FolderListModel中逐个获取文件？

Answer 1

我是这个线程的OP，我发现问题是我忘记了second variable of the function get is a string。

这意味着属性fileName必须在“”中传递，如下所示。

在下面的罪魁祸首代码，

console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.fileName)) 
image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.folder.fileName) 

folderModel.fileName和folderModel.folder.fileName必须换成"fileName"：

console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, "fileName")) 
image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, "fileName") 

Answer 2

解决了这个问题。 2件事，必须在设置selectFolder属性后显示FileDialog，所以我们在onCompleted插槽上执行（这是来自FileDialog文档）

并且使用更方便的fileURL属性修复了模型项属性。

同时添加一个支票，以便当击中列表末尾时我的计数器翻转。

import QtQuick 2.0 
import QtQuick.Dialogs 1.0   // FileDialog 
import Qt.labs.folderlistmodel 2.1 // FolderListModel 

Item 
{ 
    id: head 

    property int i: 0 

    height: 500; width: 500 
    FileDialog 
    { 
     id:    photoDirectoryFileDialog 
     title:   "Select the photo directory:" 
     selectFolder: true 
     height:   parent.height; width: parent.width 
     onAccepted: { 
      console.log("selected folder: " + folder) 
     } 

     Component.onCompleted: visible = true 
    } 

    ListView 
    { 
     FolderListModel 
     { 
      id: folderModel 
      folder: photoDirectoryFileDialog.folder 
      nameFilters: ["*.jpg"] 
     } 

     Component 
     { 
      id: fileDelegate 
      Text { text: fileName } 
     } 

     model: folderModel 
     delegate: fileDelegate 
    } 

    // Show photos 
    Image 
    { 
     id: image 
     source: "" 
    } 

    MouseArea 
    { 
     anchors.fill: parent 
     onClicked: 
     { 
      console.log ("fsdfsdf: " + i + " --- " + folderModel.get (i, "fileURL")) 
      image.source = folderModel.get (i, "fileURL") 
      if (++i == folderModel.count) i = 0 
     } 
    } 
}