Setting Items of SplitView

maxwell31

Hi,

I have a desktop application where I will need to work with many SplitViews. To save some typing, I would like to do define the SplitView once, and then be able to assign Items to it, but I don't know how this could be done. I have the following:

MySplitView.qml

import QtQuick 2.10
import QtQuick.Controls 1.3 as QC1
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Item{

QC1.SplitView {
    id: splitView
    anchors.fill: parent
    orientation: Qt.Vertical
    Layout.fillHeight: true
    Layout.fillWidth: true
    resizing: true

    Item {
    id: upperScreen
    Layout.fillHeight: true
    anchors.left: parent.left
    anchors.right: parent.right

    Button{
        id: expandCollapseButton
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        width: 16
        height: 16
        Image {
        id: buttonImage
        source: "icons/collapse.svg"
        anchors.centerIn: parent
        }
        checkable: true
        checked: true
        onCheckedChanged: {
        if(checked) {
            lowerScreen.visible=true
            buttonImage.source= "icons/expand.svg"
        }
        else {
            lowerScreen.visible=false
            buttonImage.source= "icons/colapse.svg"
        }
        }
    }
    }
    Item {
    id: lowerScreen
    Layout.minimumHeight: 260
    Layout.maximumHeight: 450
    anchors.left: parent.left
    anchors.right: parent.right

    }

}

}

Ideally, I would like to be able to use it like this:

MySplitView {
upperScreen = someItem
lowerScreen = someotherItem
}

Item {
    id: someItem
}

Is this possible?

Diracsbracket

@maxwell31 :
If the number of splits is fixed to one (i.e. 2 items), then you could define a property 'item' in each of your sub-views (equivalent to the 'contentItem' of e.g. ListView):

SplitView {
    id: splitView
    ...
    
    Rectangle {
        id: upperScreen
        color: "blue"
        
        property Item item: null
        
        Button {
            id: expandCollapseButton
            ...
        }
    }
    
    Rectangle {
        id: lowerScreen
        color: "red"
        
        property Item item: null
    }
}

Then, in some JS assuming you have instances someItem1 and someItem2, you could parent/reparent those to those content items:

lowerScreen.item = someItem1
someItem1.parent = lowerScreen

upperScreen.item = someItem2
someItem2.parent = upperScreen

upperScreen.item.text = "ALL IS OK!" //assuming someItem2 has a text property