如何在QML中访问文件系统

原创已于 2024-11-15 13:52:12 修改 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#qt

于 2024-11-15 13:50:52 首次发布

例如

import QtQuick
 import Qt.labs.folderlistmodel

 ListView {
     width: 200; height: 400

     FolderListModel {
         id: folderModel
         nameFilters: ["*.qml"]
     }

     Component {
         id: fileDelegate
         required property string fileName
         Text { text: fileName }
     }

     model: folderModel
     delegate: fileDelegate
 }

这段代码是一个简单的 Qt Quick 示例，展示了如何使用 FolderListModel 来列出一个文件夹中的所有 .qml 文件，并在 ListView 中显示这些文件名。接下来，我会逐行解释这段代码的含义，并说明如何使用这个接口。

代码解析

import QtQuick
import Qt.labs.folderlistmodel

import QtQuick 引入了 Qt Quick 的基础模块，提供了 UI 组件和 QML 功能。
import Qt.labs.folderlistmodel 引入了 Qt 提供的 FolderListModel，这是一个实验性模块，用于列出文件夹中的文件，并且支持过滤和列出文件路径。

ListView {
    width: 200; height: 400

ListView 是一个常见的 QML 组件，用于显示一个基于列表的数据视图。width 和 height 属性定义了视图的大小。
在这个例子中，ListView 用来展示一个文件夹中 .qml 文件的列表。

FolderListModel {
    id: folderModel
    nameFilters: ["*.qml"]
}

FolderListModel 是 Qt 提供的一个模型，专门用于列出文件夹中的文件。它会列出给定文件夹路径中的所有文件。
nameFilters 属性指定了一个文件名过滤器，["*.qml"] 表示只列出以 .qml 为后缀的文件。也就是说，只有 .qml 文件会被加载并展示在 ListView 中。

Component {
    id: fileDelegate
    required property string fileName
    Text { text: fileName }
}

Component 定义了一个 UI 模板（委托），它将如何显示每一项数据。
fileName 是 Component 的一个属性，用来接收并展示文件的名称。
Text { text: fileName } 是委托的内容，用来展示文件名。每个文件名都会通过这个模板显示在列表中。

model: folderModel
delegate: fileDelegate

model 属性指定了要显示的数据源，这里是 folderModel，即 FolderListModel 对象，它包含了文件夹中所有 .qml 文件的列表。
delegate 属性指定了如何展示每一项数据，这里是 fileDelegate，即上面定义的 Component。每个文件名都会通过 fileDelegate 显示在 ListView 中。

代码如何工作

列出文件：
- FolderListModel 会列出指定路径（当前代码没有指定路径，默认会列出应用程序的根目录）的文件。
- nameFilters 用于筛选文件，只显示以 .qml 为后缀的文件。这意味着文件夹中只有 .qml 文件会被列出，其他类型的文件会被过滤掉。
显示文件名：
- ListView 是展示列表的容器。它使用 folderModel 作为数据源，delegate 属性指定了 fileDelegate，也就是如何渲染每一项数据。在这个例子中，文件名将通过 Text 组件显示出来。

使用这个接口

1. 指定文件夹路径

在当前示例中，FolderListModel 使用默认的文件夹路径。如果你想列出某个特定文件夹的文件，可以使用 folder 属性来指定路径。例如：

FolderListModel {
    id: folderModel
    folder: "file:///path/to/your/folder"  // 替换为你要列出的文件夹路径
    nameFilters: ["*.qml"]  // 只列出 .qml 文件
}

这样，FolderListModel 会列出指定文件夹下所有 .qml 文件。

2. 修改过滤器

nameFilters 属性用来过滤文件类型。如果你只想列出 .txt 文件，可以修改为：

nameFilters: ["*.txt"]

你也可以使用多个过滤条件：

nameFilters: ["*.qml", "*.txt"]

这样，文件夹中所有 .qml 和 .txt 文件都会被列出。

3. 自定义文件项显示

在 delegate 中，你可以自定义每个文件项的显示方式。目前代码使用了 Text 来显示文件名。如果你想显示更多的信息（例如文件大小、修改时间等），可以扩展 fileDelegate：

Component {
    id: fileDelegate
    required property string fileName
    required property string filePath
    required property string fileSize

    Column {
        Text { text: "File: " + fileName }
        Text { text: "Path: " + filePath }
        Text { text: "Size: " + fileSize }
    }
}

然后在 FolderListModel 中传递更多的数据（例如文件路径和文件大小）。

4. 响应文件项点击

如果你想响应点击文件项，可以为 ListView 添加 onClicked 事件处理：

ListView {
    width: 200; height: 400
    model: folderModel
    delegate: fileDelegate

    onClicked: {
        console.log("Clicked on file:", model.fileName);
    }
}

总结

FolderListModel 是一个用于列出文件夹中文件的 QML 模型，支持按文件名过滤。
ListView 用于展示文件列表，delegate 定义了每个文件项的显示方式。
你可以通过指定 folder 路径和 nameFilters 来控制列出哪些文件。
该接口非常适合用于展示文件系统中的文件，并支持进一步的操作，比如点击文件时进行处理等。

例子，要想获取文件中的所有.tif文件

import QtQuick
import QtQuick.Controls
import Qt.labs.folderlistmodel

ApplicationWindow {
    visible: true
    width: 600
    height: 400

    // ListView 用于展示文件列表
    ListView {
        width: parent.width
        height: parent.height

        model: folderModel  // 使用 FolderListModel 作为数据源

        // 定义每一项的显示样式
        delegate: Item {
            width: ListView.view.width
            height: 40

            Rectangle {
                width: parent.width
                height: 40
                color: "lightgray"
                border.color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: fileName  // 显示文件名
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("File clicked: " + filePath)
                    }
                }
            }
        }

        // 定义 FolderListModel 来列出文件
        FolderListModel {
            id: folderModel
            folder: "file:///F:/DEM/"  // 指定文件夹路径
            nameFilters: ["*.tif"]  // 只列出 .tif 文件

            // 可选：自定义属性可以传递文件路径
            // onFileListChanged: {
            //     console.log("Files loaded from folder:", folder)
            // }
        }
    }
}