如何从 QML 中的 FolderListModel 中一一获取文件？答案

【问题标题】：How to fetch files one by one from FolderListModel in QML?如何从 QML 中的 FolderListModel 中一一获取文件？
【发布时间】：2016-03-05 09:00:13
【问题描述】：

以下代码的目的是让用户选择一个文件夹的照片，然后将这些照片一张一张地显示出来。

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

正如您在输出中看到的，我在输出中收到“未定义”作为文件名。 QML中如何从FolderListModel中一一获取文件？

【问题讨论】：

标签： qt qml qt5 qtquick2

【解决方案1】：

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

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

还添加一个检查，以便 i 计数器在到达列表末尾时翻转。

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

【讨论】：

【解决方案2】：

我是这个帖子的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")

【讨论】：