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。

这意味着必须在＆＃34;＆＃34;中传递属性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属性修复了访问模型项属性的问题。

同时添加一个支票，以便在点击列表末尾时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
        }
    }
}

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

2 个答案: