使 QML TreeView 可调整大小答案

【问题标题】：Making a QML TreeView resizable使 QML TreeView 可调整大小
【发布时间】：2017-08-01 19:39:01
【问题描述】：

我使用 QML TreeView 和 TableView 制作了一个工作应用程序。 Treeview 是双窗格视图的左侧，TableView 是双窗格视图的右侧（就像 windows 资源管理器一样）。

我如何指定用户能够通过抓住任一视图的最中心边缘并拖动来调整两个视图的宽度？

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);
        }
    }
    }
}

【问题讨论】：

标签： qml

【解决方案1】：

事实上，已经有一个用于双窗格（以及更多）视图的 QML 小部件 - SplitView。

在上面的代码中，我改变了行

Item {
id: dualPane

到

SplitView {
id: dualPane

它也可以（显然）进行垂直分割，并且不仅限于两个窗格。

【讨论】：