使 QML TreeView 可调整大小

Posted 2023-02-16

【中文标题】使 QML TreeView 可调整大小

【英文标题】：Making a QML TreeView resizable

【发布时间】：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);
        
    
    

【参考方案1】：

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

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

Item 
id: dualPane

到

SplitView 
id: dualPane

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