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