Binding loop detected when parent height changed to childrenRect.height



  • Hi, this simple code generates "QML Rectangle: Binding loop detected for property "height"" warning/error when clicked and Rectangle becomes visible. I really do not see that there is a binding loop.
    The warning/error is not printed if Rectangle initial property expanded is true, so this object has height at the beginning.
    Is this QML bug or there are some under the hood strange initializations, when size is 0 at beginning?

    Windows 7, 64-bit, Qt 5.4.0, QtQuick 2.4

    Thank you

    UPDATED
    Further investigating I found out that it happens not when initial parent height is 0, but any value, so the warning is printed when parent becomes childrenRect.height

    @Item {
    width: 400
    height: 400

    Rectangle {
        id: subOptionList
    
        property bool expanded: false
    
        height: expanded ? childrenRect.height : 0
        clip: true
        width: parent.width
    
        Rectangle {
            border.color: "red"
            width: parent.width
            height: 20
        }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            subOptionList.expanded = !subOptionList.expanded
        }
    }
    

    }@


  • Moderators

    Height of the red rectangle may not be the same as childrenRect. What happens when you try this instead:
    @
    // ...
    height: expanded ? myRect.height : 0
    clip: true
    width: parent.width

    Rectangle {
    id: myRect
    border.color: "red"
    width: parent.width
    height: 20
    }
    // ...
    @



  • Thanks for suggestion, but that is not the intended use case, because in end application I want the child Items to be dynamic, so the parent needs to adjust its size using childrenRect. I simplified the example to the minimum for easy reproducing.

    Anyway some more realistic use case, where objects are created dynamically and creates the same error/warning message.

    @Item {
    width: 400
    height: 400

    Component {
        id: dynamicRec
        Rectangle {
            border.color: "red"
            width: parent.width
            height: 20
        }
    }
    
    Column {
        id: subOptionList
    
        property bool expanded: false
    
        height: expanded ? childrenRect.height : 0
        clip: true
        width: parent.width
    
    
        Component.onCompleted: {
            dynamicRec.createObject(subOptionList,{});
            dynamicRec.createObject(subOptionList,{});
            dynamicRec.createObject(subOptionList,{});
        }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            subOptionList.expanded = !subOptionList.expanded
        }
    }
    

    }@

    I really like QML so want to know if this could be a bug, so it can be reported and fixed :)


  • Moderators

    You can report it and find out ;-)

    The Column element is designed to automatically expand to fit all it's children.

    Since you effectively want to hide it when not expanded, then why not keep the height constant, and hide it either off screen, or set visibility/ opacity to 0?



  • Thanks, that won't also work, because I want that the height is really 0, so that other dependent elements move accordingly. Example where visibility and opacity doesn't work:

    @Item {
    width: 400
    height: 400

    Component {
        id: dynamicRec
        Rectangle {
            border.color: "red"
            width: parent.width
            height: 20
        }
    }
    
    Column {
        id: subOptionList
    
        property bool expanded: false
    

    // opacity: expanded ? 1 : 0
    // visible: expanded ? true : false
    height: expanded ? childrenRect.height : 0
    clip: true
    width: parent.width

        Component.onCompleted: {
            dynamicRec.createObject(subOptionList,{});
            dynamicRec.createObject(subOptionList,{});
            dynamicRec.createObject(subOptionList,{});
        }
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            subOptionList.expanded = !subOptionList.expanded
        }
    }
    Rectangle {
        anchors.top: subOptionList.bottom
        width: parent.width
        height: 40
        color: "blue"
    }
    

    }@


Log in to reply
 

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