Binding loop on ListView delegate - qt

Question

I have this code , which gives me this error:
file:///home/user/qmltests/bindingheight.qml:29:5: QML Pane: Binding loop detected for property "height"
Why would it produce the loop ? And how do I fix this?
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
ListView {
width: 300
height: 600
clip: true
model: ListModel {
id: fruitModel
ListElement {
name: "Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"
cost: 2.45
}
ListElement {
name: "Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange"
cost: 3.25
}
ListElement {
name: "Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana"
cost: 1.95
}
}
delegate: Item {
width: 200
height: childrenRect.height * 1.1
Pane {
height: contentItem.childrenRect.height
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: 20
padding: 10
background: Rectangle { anchors.fill: parent; color: "gray";}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Executing action on the item")
}
}
ColumnLayout {
anchors.top: parent.top
anchors.left:parent.left
anchors.right: parent.right
Label {
id: item_to_hide
text: model.name
wrapMode: Label.WordWrap
Layout.maximumWidth: parent.width
}
Label {
text: model.cost
}
Button {
text: " Hide element "
onClicked: {
item_to_hide.visible=false
}
}
Button {
text: " Show element "
onClicked: {
item_to_hide.visible=true
}
}
}
}
}
}
This is with Qt 5.11, testing was done with qmlscene, just copy/paste and feed to the bin/qmlscene to reproduce the error.

Answer 1

Using the same code you wrote just change height of Pane to implicitHeight. That will break the loop created by height.
Pane {
implicitHeight: contentItem.childrenRect.height
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: 20
padding: 10
background: Rectangle { anchors.fill: parent; color: "gray";}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Executing action on the item")
}
}
...

Answer 2

Use IDs to identify your components instead of using children*/content* properties. Your code will be easier to understand for you and for QML. This works for me:
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
ListView {
width: 300
height: 600
clip: true
model: ListModel {
id: fruitModel
ListElement {
name: "Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple"
cost: 2.45
}
ListElement {
name: "Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange"
cost: 3.25
}
ListElement {
name: "Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana"
cost: 1.95
}
}
delegate: Item {
width: 200
height: panneau.height * 1.1
Pane {
id: panneau
height: clayout.height
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: 20
padding: 10
background: Rectangle {
anchors.fill: parent
color: "gray"
}
MouseArea {
anchors.fill: parent
onClicked: console.log("Executing action on the item")
}
ColumnLayout {
id: clayout
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
Label {
id: item_to_hide
text: model.name
wrapMode: Label.WordWrap
Layout.maximumWidth: parent.width
}
Label {
text: model.cost
}
Button {
text: " Hide element "
onClicked: item_to_hide.visible = false
}
Button {
text: " Show element "
onClicked: item_to_hide.visible = true
}
}
}
}
}