如何从 QML 中的 FolderListModel 中一个一个地获取文件?
How to fetch files one by one from FolderListModel in QML?
下面代码的用意是让用户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 中一个一个地获取文件?
已为您解决此问题。 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
}
}
}
我是这个帖子的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")
下面代码的用意是让用户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 中一个一个地获取文件?
已为您解决此问题。 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
}
}
}
我是这个帖子的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")