Unsolved Dynamic SplitView
-
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. -