SplitView difference behavior if create static or dynamic

[elicat]

Hello,
I my project i have a splitvew with two rectangle inside. I i designe static I have two rectangle side by side, if I create dynamic them they are overlaid. Where am I wrong?

The component:

Item {
    id: idItemRectPgm
    property alias witdhProgram : idRectPgm.width
    property alias heightProgram : idRectPgm.height
    property alias colorProgram : idRectPgm.color
    property alias textProgram : textRectPgm.text
    property alias objectNameProgram: idRectPgm.objectName
    property alias visibleProgram: idRectPgm.visible
    property alias xProgram: idRectPgm.x
    Rectangle {
        id: idRectPgm
        objectName: "objRectPgm"
        visible: true
        width: 300
        height:  idRectCenterAreaRow2.height
        color: "#FF1F35"
        Layout.minimumWidth : (Screen.width/4)
        Layout.maximumWidth: idRectCenterAreaRow2.width
        border.width : 1
        border.color : "#000000"
        anchors.left: parent.left
        anchors.leftMargin: 2
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.rightMargin: 3
        Text {
            id: textRectPgm
            text : qsTr("programma")
        }
       }
}

The code when i Create 2 rectangle inside SplitView:

                        var componentQmlRectPgm = Qt.createComponent(namefileqmlpgm);
                        if (componentQmlRectPgm.status == Component.Error) {

                            console.log(componentQmlRectPgm.errorString());

                        } else {
                            var objName = "obj" + namefileqmlpgm;
                            if (componentQmlRectPgm.status == Component.Ready) {
                                console.log("sono dentro componentQmlRectPgm");
                                var objRectPgmCreate = componentQmlRectPgm.createObject(idRectCenterAreaRow2, {"xProgram": 0,  "colorProgram": "#F0F0F0", "objectNameProgram": objName, "y": 0, "textProgram": "RECTANGLE 1 GRAY", "witdhProgram": 300, "eigthProgram": idRectCenterAreaRow2.height, "visibleProgram": true });
                                if (objRectPgmCreate == null) {
                                    // Error Handling
                                    console.log("Error creating object");
                                } else {
                                    //console.log("object created: " + objRectPgmCreate);
                                    splitViewProgram.addItem(objRectPgmCreate);
                                    objRectPgmCreate.visible= true;
                                }
                                var objRectPgmCreate2 = componentQmlRectPgm.createObject(idRectCenterAreaRow2, {"xProgram": 301 , "colorProgram": "#00E100", "y": 0,"objectNameProgram": "objNameTest",  "textProgram": "RECTANGLE 2 GREEN", "witdhProgram": 300, "eigthProgram": idRectCenterAreaRow2.height });
                                if (objRectPgmCreate2 == null) {
                                    // Error Handling
                                    console.log("Error creating object");
                                } else {
                                    //console.log("object created: " + objRectPgmCreate);
                                    splitViewProgram.addItem(objRectPgmCreate2);
                                    console.log("creato: " + objRectPgmCreate2.id);
                                    objRectPgmCreate2.visible= true;
                                }
                            }
                        }
                        
                    }

This is SplitView with 2 rect commented for test:

            SplitView {
                id: splitViewProgram
                orientation: Qt.Horizontal
                anchors.top: parent.top
                anchors.topMargin: 0
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                resizing : true
                width:idRectCenterArea.width
                height:  idRectCenterArea.height
                /*
                Rectangle {
                    id: idRectPgm
                    objectName: "objRectPgm"
                    visible: true
                    width: 300
                    height:  idRectCenterAreaRow2.height
                    color: "#FF1F35"
                    Layout.minimumWidth : (Screen.width/4)
                    Layout.maximumWidth: idRectCenterAreaRow2.width
                    border.width : 1
                    border.color : "#000000"
                    //anchors.left: parent.left
                    anchors.leftMargin: 2
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    anchors.rightMargin: 3
                    Text {
                        id: textRectPgm
                        text : qsTr("programma")
                    }
                }
                Rectangle {
                    id: idRectPgm2
                    objectName: "objRectPgm2"
                    visible: true
                    width: 300
                    height:  idRectCenterAreaRow2.height
                    color: "#FFC0CE"
                    Layout.minimumWidth : (Screen.width/4)
                    Layout.maximumWidth: idRectCenterAreaRow2.width
                    border.width : 1
                    border.color : "#000000"
                    //anchors.left: parent.left
                    anchors.leftMargin: 2
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    anchors.rightMargin: 3
                    Text {
                        id: textRectPgm2
                        text : qsTr("programma2")
                    }
                }
                */

[Diracsbracket]

@elicat said in SplitView difference behavior if create static or dinamic:
What about assigning some size to your Item , .e.g.:

Item {
    id: idItemRectPgm
    height: childrenRect.height
    width: childrenRect.width
   ...
}

[elicat]

@Diracsbracket said in SplitView difference behavior if create static or dynamic:

idItemRectPgm

are you telling me to give a dimension to the item of the same size that contains the rectangle? ok I'll try, but what effect does it have in the probelma that it does not support both the rectangles and instead I place them in a static way?

[Diracsbracket]

@elicat
The difference is that in the dynamic case, when you define your component in your file, you wrap theRectangle inside an Item to which you give 0 dimensions. Yet, your Rectangle refers to its parent, i.e. Itemfor its anchoring. sinceItemhas size 0, itsleft, right, topandbottomproperties are all identically equal to 0 .... So yourSplitViewwill layout your 2Items of size 0 at the same spot and your inner Rectangle`s therefore overlap.

PS: Wrapping your Rectangle inside an Item is superfluous and can lead, as you have experiences to unexpected effects. So, if you have nothing else to put inside it, you better just remove it.