Making a QML TreeView resizable

Question

I've made a working application using a QML TreeView and a TableView. The Treeview is the left-hand side of a dual-pane view and the TableView is the right-hand side of the dual-pane view (just like windows explorer).

How can I specify that the user is able to resize the width of both views by grabbing the centre-most edge of either view and dragging?

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("File System")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Item {
        id: dualPaneBox
        anchors.fill: parent

    TreeView {
        id: viewDir
        anchors.left: parent.left
        anchors.right: viewFiles.left
        anchors.margins: 50
        height: parent.height
        width: parent.width / 2
        model: fileDirModel
        selection: selDir


        TableViewColumn {
            title: "Name"
            role: "fileName"
            resizable: true
        }

        onActivated : {
            if (viewDir.isExpanded(index)) {
                viewDir.collapse (index);
            } else {
                viewDir.expand (index);
                var url = fileDirModel.data(index,
                               FileDirModel.UrlStringRole);
                var name = fileDirModel.data (index,
                               FileDirModel.FullNameRole);
                viewFiles.refreshJS (url, name);
            }
        }
    }

    TableView {
        id: viewFiles
        anchors.right: parent.right
        anchors.margins: 50
        height: parent.height
        width: parent.width / 2

        model: fileListModel

        TableViewColumn {
            title: "Name"
            role: "fileName"
            resizable: true
        }
        TableViewColumn {
            title: "Size"
            role: "size"
            resizable: true
            horizontalAlignment : Text.AlignRight
            width: 70
        }

        TableViewColumn {
            title: "URLString"
            role: "UrlStringRole"
            resizable: true
            width: 100
        }

        TableViewColumn {
            title: "Date Modified"
            role: "lastModified"
            resizable: true
        }

        function refreshJS (url, name) {
            var myindex = fileListModel.refresh (url, name);
        }
    }
    }
}

Lelanthran Lelanthran · Accepted Answer · 2017-08-02T07:46:39

As it turns our, there is already a QML widget for dual-pane (and more) views - SplitView.

In the above code, I've changed the lines

Item {
id: dualPane

to

SplitView {
id: dualPane

It can (apparently) do vertical splits as well, and is not limited to only two panes.

Making a QML TreeView resizable

1 Answers