SplitView difference behavior if create static or dynamic



  • 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")
                        }
                    }
                    */
    


  • @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
       ...
    }
    


  • @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?



  • @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 innerRectangle`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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.