Delegate FolderListModel in TableView

Question

I'm learning Qt Quick to make a file manager, but I have no experience in QML or GUI in general. The first step is to list the content of a folder, using FolderListModel. I got the example code working using ListView, but naturally I want to display multiple fields in addition to the name, e.g. size, time, and so on. Thus, I'm thinking of using TableView.

However, it's not clear to me how to delegate each entry as a row in TableView. Currently I'm simply using itemDelegate to display fileName, and the resultant is that in each row, all the columns repeat the name of the entry. So I think rowDelegate is the correct way, but how do I make a proper delegate Component for that purpose? Conceptually I'd like to specify an array of fields, e.g. [model.fileName, model.fileSize] corresponding to the table columns. Is this achievable?

For clarify I'm posting the code below:

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1

ApplicationWindow {
    visible: true
    width: 900
    height: 600
    title: qsTr("Hello World")

    Item {
        anchors.fill: parent

        width: 900
        height: 600

        SplitView {
            id: splitView1
            anchors.fill: parent

            TabView {
                id: tabView1
                width: splitView1.width / 2

                Tab {
                    title: qsTr("Home")

                    TableView {
                        id: tableView1
                        width: splitView1.width / 2

                        TableViewColumn {
                            role: "name"
                            title: qsTr("Name")
                            width: tableView1.width * 0.75
                        }

                        TableViewColumn {
                            role: "size"
                            title: qsTr("Size")
                            width: tableView1.width * 0.25
                        }

                        FolderListModel {
                            id: folderModel2
                            folder: "file:/home/username"
                            nameFilters: ["*"]
                            showHidden: true

                        }

                        Component {
                            id: fileDelegate2
                            Text {
                                text: model.fileName
                            }
                        }

                        model: folderModel2
                        itemDelegate: fileDelegate2
                    }
                }
            }
        }
    }
}

Mitch Mitch · Accepted Answer · 2015-11-04T08:48:17

The documentation mentions that the following roles are available:

List item

fileName

filePath

fileURL (since Qt 5.2)

fileBaseName

fileSuffix

fileSize

fileModified

fileAccessed

fileIsDir

So you don't need to have custom delegates to display that information, just set the role property of TableViewColumn appropriately:

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1

ApplicationWindow {
    visible: true
    width: 900
    height: 600
    title: qsTr("Hello World")

    Item {
        anchors.fill: parent

        width: 900
        height: 600

        SplitView {
            id: splitView1
            anchors.fill: parent

            TabView {
                id: tabView1
                width: splitView1.width / 2

                Tab {
                    title: qsTr("Home")

                    TableView {
                        id: tableView1
                        width: splitView1.width / 2

                        TableViewColumn {
                            role: "fileName"
                            title: qsTr("Name")
                            width: tableView1.width * 0.75
                        }

                        TableViewColumn {
                            role: "fileSize"
                            title: qsTr("Size")
                            width: tableView1.width * 0.25
                        }

                        FolderListModel {
                            id: folderModel2
                            folder: "file:/home/username"
                            nameFilters: ["*"]
                            showHidden: true

                        }

                        model: folderModel2
                    }
                }
            }
        }
    }
}

Delegate FolderListModel in TableView

1 Answers