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

Question

下面代码的用意是让用户select一个文件夹中的照片，然后一张一张的显示这些照片。

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

已为您解决此问题。 2 件事，FileDialog 必须在设置 selectFolder 属性后显示，所以我们在 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
        }
    }
}

Answer 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")

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

How to fetch files one by one from FolderListModel in QML?

qt

qml

qt5

qtquick2