Question

我使用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);
        }
    }
    }
}

Answer 1

当它转向我们时，已有一个用于双窗格（和更多）视图的QML小部件 - SplitView。

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

Item {
id: dualPane

到

SplitView {
id: dualPane

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

使QML TreeView可调整大小

1 个答案: