layoutqmlsplitview

Splitview inside a Layout in QML is not working properly


I cannot be able to achieve Split view inside a layout. When I try to drag, the screen returning to minimum split screen width. But without layout I can able to drag and split the view properly

ColumnLayout {
    anchors.fill: parent
    spacing: 20

    RowLayout {
        spacing:20
        height: 500
 
         SplitView {
            anchors.fill: parent
            orientation: Qt.Horizontal
                Rectangle {
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightblue"
                    Text {
                        anchors.centerIn: parent
                        text: "View 1"
                    }
                }
                Rectangle {
                    id: centerItem
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightgray"
                    Text {
                        anchors.centerIn: parent
                        text: "View 2"
                    }
                }
                Rectangle {
                    SplitView.fillWidth: true
                    SplitView.fillHeight: true
                    color: "lightgreen"
                    Text {
                        anchors.centerIn: parent
                        text: "View 3"
                    }
                }
           }
           
        }
    }

Solution

  • The error is in SplitView anchors.fill: parent.

    SplitView component is a child of RowLayout, this means that its size must be managed with Layout attached properties and not set explicitly. Anchors set item size and position.

    Substitute SplitView anchors.fill: parent with Layout.fillWidth: true; Layout.fillHeight: true

    Below your working as expected code

    ColumnLayout {
        anchors.fill: parent // Ok if its parent is not a Layout item
        spacing: 20
    
        RowLayout {
            spacing:20
            Layout.preferredHeight: 500 // Okay
     
             SplitView {
                Layout.fillWidth: true // Okay
                Layout.fillHeight: true // Okay
                orientation: Qt.Horizontal
                    Rectangle {
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightblue"
                        Text {
                            anchors.centerIn: parent
                            text: "View 1"
                        }
                    }
                    Rectangle {
                        id: centerItem
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightgray"
                        Text {
                            anchors.centerIn: parent
                            text: "View 2"
                        }
                    }
                    Rectangle {
                        SplitView.fillWidth: true
                        SplitView.fillHeight: true
                        color: "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "View 3"
                        }
                    }
               }
               
            }
        }
    

    Reference: Qt Layout QML Type

    Updated:

    You don't need layouts to combine different SplitViews. SplitView behaves as a layout manager.

    Below the example that you have request in the comment:

    SplitView {
        anchors.fill: parent
        orientation: Qt.Vertical
    
        SplitView {
            SplitView.preferredHeight: parent.height / 2
            orientation: Qt.Horizontal
    
            Rectangle {
                SplitView.preferredWidth: parent.width * 0.6
                color: "lightblue"
                Text {
                    anchors.centerIn: parent
                    text: "SV 1 Item 1"
                }
            }
    
            Rectangle {
                color: "lightgray"
                Text {
                    anchors.centerIn: parent
                    text: "SV 1 Item 2"
                }
            }
        }
    
        SplitView {
            orientation: Qt.Horizontal
    
            Rectangle {
                SplitView.preferredWidth: parent.width * 0.3
                color: "lightgreen"
                Text {
                    anchors.centerIn: parent
                    text: "SV 2 Item 1"
                }
            }
    
            Rectangle {
                color: "lightcoral"
                Text {
                    anchors.centerIn: parent
                    text: "SV 2 Item 2"
                }
            }
        }
    }
    

    This is the result:

    Combination of hori and vert split views