SplitView elements both in horizontally and vertically in qml

Question

I am having below elements in QML A and B in a Rowlayout1 C and D in Rowlayout2

A and B is already Splitted horizontally using SplitView C and D is already Splitted horizontally using SplitView

No I need to Split A and C as VERTICAL and B and D as VERTICAL IS that POSSIBLE?

ColumnLayout {
    anchors.fill: parent 
    spacing: 20
    
    SplitView{                              //THis is not working properly, I need to split VERICALLY the layouts
        Layout.fillWidth: true
        Layout.fillHeight: true 
        orientation: Qt.Vertical
    

        RowLayout {
            spacing:20
            Layout.preferredHeight: 500 
     
             SplitView {
                Layout.fillWidth: true 
                Layout.fillHeight: true 
                orientation: Qt.Horizontal
                    Rectangle {
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightblue"
                        Text {
                            anchors.centerIn: parent
                            text: "View A"
                        }
                    }
                    Rectangle {
                        SplitView.fillWidth: true
                        SplitView.fillHeight: true
                        color: "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "View B"
                        }
                    }
               }
               
            }
            
            RowLayout {
            spacing:20
            Layout.preferredHeight: 500
     
             SplitView {
                Layout.fillWidth: true 
                Layout.fillHeight: true 
                orientation: Qt.Horizontal
                    Rectangle {
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightblue"
                        Text {
                            anchors.centerIn: parent
                            text: "View C"
                        }
                    }
                    Rectangle {
                        SplitView.fillWidth: true
                        SplitView.fillHeight: true
                        color: "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "View D"
                        }
                    }
               }
               
            }
        }
    }

I am having below elements in QML A and B in a Rowlayout1 C and D in Rowlayout2

A and B is already Splitted horizontally using SplitView C and D is already Splitted horizontally using SplitView

No I need to Split A and C as VERTICAL and B and D as VERTICAL IS that POSSIBLE?

Answer 1

You could create a row and column headers and just put the SplitView in the headers. In the following diagram, we place one SplitView for C1 and C2 and another SplitView for R1 and R2.

Corner	C1	C2
R1	A	B
R2	C	D

Here's an example QML:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    title: "Dual SplitViews"
    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true
            Title {
                Layout.preferredWidth: 60
                Layout.preferredHeight: 60
                text: "Corner"
            }
            SplitView {
                Layout.fillWidth: true
                Layout.preferredHeight: 60
                TitleC1 { id: titleC1 }
                TitleC2 { id: titleC2 }
            }
        }
        RowLayout {
            Layout.fillHeight: true
            SplitView {
                Layout.preferredWidth: 60
                Layout.fillHeight: true
                orientation: Qt.Vertical
                TitleR1 { id: titleR1 }
                TitleR2 { id: titleR2 }
            }
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Cell {
                    anchors.left: parent.left
                    anchors.top: parent.top
                    width: titleC1.width
                    height: titleR1.height
                    text: "A"
                    backgroundColor: "lightblue"
                }
                Cell {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    width: titleC2.width
                    height: titleR1.height
                    text: "B"
                    backgroundColor: "lightgreen"
                }
                Cell {
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    width: titleC1.width
                    height: titleR2.height
                    text: "C"
                    backgroundColor: "lightblue"
                }
                Cell {
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    width: titleC2.width
                    height: titleR2.height
                    text: "D"
                    backgroundColor: "lightgreen"
                }
            }
        }
    }
}

// Title.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Label {
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    background: Rectangle { color: "#eee" }
}

// TitleC1.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    SplitView.preferredWidth: 200
    text: "C1"
}

// TitleC2.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    text: "C2"
}

// TitleR1.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    SplitView.preferredHeight: 200
    text: "R1"
}

// TitleR2.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    text: "R2"
}

// Cell.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Label {
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    property color backgroundColor: "lightblue"
    background: Rectangle {
        color: backgroundColor
    }
}

You can Try it Online!