Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Dynamic SplitView
Forum Updated to NodeBB v4.3 + New Features

Dynamic SplitView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 915 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Meli
    wrote on 14 Aug 2019, 11:12 last edited by
    #1

    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

    0_1565779655304_Unbenannt.png

    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.

    1 Reply Last reply
    1
    • V Offline
      V Offline
      Vahid KaraBey
      wrote on 7 May 2024, 11:57 last edited by Vahid KaraBey 5 Jul 2024, 12:21
      #2

      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;
                      }
                 }
          }
      }
      
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved