Dynamic SplitView
-
wrote on 14 Aug 2019, 11:12 last edited by
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. -
-
wrote on 7 May 2024, 11:57 last edited by Vahid KaraBey 5 Jul 2024, 12:21
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; } } } }