Dynamic height for rectangle



  • Hi,
    I am using this code for display the resolution of camera. I want to set dynamic height for rectangle but I have this error in application output:

    QML Rectangle: Binding loop detected for property "height"
    
    Item {
        
        id: dialogComponent
        anchors.fill: parent
    
        PropertyAnimation { target: dialogComponent; property: "opacity";
            duration: 400; from: 0; to: 1;
            easing.type: Easing.InOutQuad ; running: true }
    
        Rectangle {
            anchors.fill: parent
            id: overlay
            color: "#000000"
            opacity: 0.6
            MouseArea {
                anchors.fill: parent
            }
        }
    
        Rectangle {
            id: dialogWindow
            width: textDialog.width+50
            height:cl.height+150
            radius: 4
            anchors.centerIn: parent
    
            Image {
                id: close
                source: "images/close.png"
                anchors.horizontalCenter: parent.right
    
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        dialogComponent.destroy()
                    }
                }
                layer.enabled: true
                layer.effect: DropShadow {
                    radius: 4
                    samples: radius * 2
                    source: close
                    color: Qt.rgba(0, 0, 0, 0.5)
                    transparentBorder: true
                    verticalOffset: 2
                }
            }
    
            ColumnLayout{
                id: cl
                spacing: 10
                anchors.centerIn: parent
                anchors.fill: parent
                anchors.leftMargin: 30
                RowLayout{
    
                    MyText {
                        id:textDialog
    
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                dialogComponent.destroy()
                            }
                        }
                    }
                }
                RowLayout {
                    Grid{
                        columns: 1
                        spacing: 10
    
                        ExclusiveGroup {
                            id: myListExclusiveGroup
                        }
                        Repeater {
                            id: myList
    
                            MyRadioButton {
                                text: modelData.width + "x" + modelData.height
                                exclusiveGroup: myListExclusiveGroup
                                anchors.leftMargin: 50
                                onCheckedChanged: {
                                    ....
                                }
                                Component.onCompleted: {
                                    ....
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    

  • Moderators

    Hi! This is what causes the binding loop:

    Rectangle {
             id: dialogWindow
             height:cl.height+150
    // ...
             ColumnLayout{
                 id: cl
                 anchors.fill: parent
    


  • @Wieland

    Yes,I know, but how I fix this problem?
    I do not know the number of items. How do I adjust the height?


  • Moderators

    E.g. like this:

    Main.qml

    import QtQuick 2.6
    import QtQuick.Controls 1.5
    import QtQuick.Layouts 1.1
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        MyItem { anchors.centerIn: contentItem }
    }
    

    MyItem.qml

    import QtQuick 2.6
    import QtQuick.Controls 1.5
    import QtQuick.Layouts 1.1
    
    Item {
        width: myRectangle.width
        height: myRectangle.height
        
        property int myMargin: 15
    
        Rectangle {
            id: myRectangle
            width: myColumnLayout.width + myMargin
            height: myColumnLayout.height + myMargin
            radius: 5
            border.width: 1
        }
    
        ColumnLayout {
            id: myColumnLayout
            x: myMargin / 2
            y: myMargin / 2
            Rectangle { width: 50; height: 50; color: "orange" }
            Rectangle { width: 50; height: 50; color: "pink" }
            Rectangle { width: 50; height: 50; color: "plum" }
            Rectangle { width: 50; height: 50; color: "lime" }
        }
    }
    


  • @Wieland Thank you so much


  • Moderators

    @neda You're welcome :-)


Log in to reply
 

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