Splitview inside a Layout in QML is not working properly

Question

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"
                    }
                }
           }
           
        }
    }

Answer 1

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: