Dynamic SplitView

[Meli]

I am new to QML and I want to create a dynamic nested SplitView.
The idea is that

• Left click: remove clicked rectangle and create a new SplitView with two rectangle

• Right click: remove clicked rectangle

As a result it should look like this

To add a new SplitView my idea was to do it recursive. I tried to do it like this

Splitter.qml

import QtQuick 2.13
import QtQuick.Controls 1.4

SplitView{
    id: splitter
    anchors.fill: parent

    Rectangle{
        id: rect_one
         color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

         MouseArea{
             anchors.fill: parent
             acceptedButtons: Qt.LeftButton

             onClicked: {
                 splitter.createNewSplit(rect_one);
             }
         }
    }

    Rectangle{
        id: rect_two
         color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

         MouseArea{
             anchors.fill: parent
             acceptedButtons: Qt.LeftButton

             onClicked: {
                 splitter.createNewSplit(rect_two);
             }
         }
    }

    function setOrientation(horizontal){
        if(horizontal)
        {
            splitter.orientation = Qt.Horizontal
        }
        else{
            splitter.orientation = Qt.Vertical
        }
    }

    function createNewSplit(item){

        splitter.removeItem(item);
        item.destroy();

        var component = Qt.createComponent("Splitter.qml");
        var newItem = component.createObject();

        splitter.addItem(newItem);
        setOrientation(!(Qt.Horizontal == splitter.orientation));
    }
}

This doesn't work.
It would be nice if someone can give me a hint how to achieve this.
Thanks in advance.

[Vahid KaraBey]

I had the same problem. My solution is to create two new items each time. Whenever you call the splitter function parent SplitView will get two children and so it will split into two. Be careful SamplePanel.qml should be SplitView.

SamplePanel.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

SplitView {
  id: content
    Rectangle {
        id: mainContent
        anchors.fill: parent
        color: elementsColor
        Text {
            anchors.centerIn: parent
            text: qsTr("This is Sample Panel!")
        }
    }



}

main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    
    SplitView {
        id: innerPanel
        Layout.preferredHeight: parent.height
        Layout.preferredWidth: parent.width 
        
        SplitView {
            id: firstChartPanleItem
        }
        
    }
    
    property int count : 1; // count for control the splite number and check it is initial splitView
    function spliter(orientation, parentItem) {
     
            var chartPanelComponentOne
            var chartPanelComponentTwo
            var chartPanelItemOne
            var chartPanelItemTwo

            chartPanelComponentOne = Qt.createComponent("SamplePanel.qml");
            chartPanelComponentTwo = Qt.createComponent("SamplePanel.qml");

            if (count === 1){
                chartPanelItemOne = chartPanelComponentOne.createObject(innerPanel);
                chartPanelItemTwo = chartPanelComponentTwo.createObject(innerPanel);
                if (orientation === "hor") {
                    console.log(orientation);
                    innerPanel.orientation =  Qt.Horizontal; // set the parent orientation
                    innerPanel.removeItem(firstChartPanleItem)
                    count++

                    chartPanelItemOne.SplitView.minimumWidth = .3 * innerPanel.width;
                    chartPanelItemOne.SplitView.preferredWidth = .5 * innerPanel.width;

                    chartPanelItemTwo.SplitView.minimumWidth = .3 * innerPanel.width;
                    chartPanelItemTwo.SplitView.preferredWidth = .5 * innerPanel.width;
                }
                else if (orientation === "ver"){
                    console.log(orientation);
                    count++
                    innerPanel.orientation =  Qt.Vertical; // set the parent orientation
                    innerPanel.removeItem(firstChartPanleItem)

                    chartPanelItemOne.SplitView.minimumHeight = .3 * innerPanel.height;
                    chartPanelItemOne.SplitView.preferredHeight = .5 * innerPanel.height;

                    chartPanelItemTwo.SplitView.minimumHeight = .3 * innerPanel.height;
                    chartPanelItemTwo.SplitView.preferredHeight = .5 * innerPanel.height;
                }
            }
            else {
                chartPanelItemOne = chartPanelComponentOne.createObject(parentItem);
                chartPanelItemTwo = chartPanelComponentTwo.createObject(parentItem);

                if (orientation === "hor") {
                    count++
                    parentItem.parent.orientation =  Qt.Horizontal; // set the parent orientation
                  
                    parentItem.children[0].destroy()
                    parentItem.children[1].destroy()

                    chartPanelItemOne.SplitView.minimumWidth = .3 *  parentItem.width;
                    chartPanelItemOne.SplitView.preferredWidth = .5 * parentItem.width;

                    chartPanelItemTwo.SplitView.minimumWidth =  .3 *  parentItem.width;;
                    chartPanelItemTwo.SplitView.preferredWidth = .5 * parentItem.width;
                }
                else if (orientation === "ver"){
                    count++
                    parentItem.parent.orientation =  Qt.Vertical; // set the parent orientation

                    parentItem.children[0].destroy()
                    parentItem.children[1].destroy()

                    chartPanelItemOne.SplitView.minimumHeight = .3 *  parentItem.height;
                    chartPanelItemOne.SplitView.preferredHeight = .5 *  parentItem.height;

                    chartPanelItemTwo.SplitView.minimumHeight =  .3 *  parentItem.height;
                    chartPanelItemTwo.SplitView.preferredHeight = .5 *  parentItem.height;
                }
           }
    }
}