如何從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 
     } 
    } 
}