QML Rectangle: Обнаружен цикл привязки для свойства "width" / "height"

Question

Я пытаюсь изменить размер Rectangle до размера его содержимого:

ListView {
    anchors.fill: parent
    model: ["a", "b", "c"]
    delegate: Rectangle {
        color: "gray"
        property int margin: 20
        width: childrenRect.width + 2 * margin
        height: childrenRect.height + 2 * margin
        Text {
            text: modelData
            anchors.centerIn: parent
        }
    }
}

Кажется, он работает визуально, но механизм QML выдает множество этих ошибок:

qrc: /main.qml: 13: 19: прямоугольник QML: обнаружен цикл привязки для свойства "width"

qrc: /main.qml: 13: 19: прямоугольник QML: обнаружен цикл привязкидля свойства "height"

Где находится цикл привязки и как его исправить?

Answer 1

Не принято привязывать ширину delegate к ее содержимому (childrenRect).В большинстве случаев вам нужно parent width и фиксированное (или в редких случаях динамическое) height.Посмотрите этот пример - я использую anchors для регулировки ширины и фиксирую height из 80:

anchors {
    left: parent.left
    right: parent.right
}
height: 80

Возможно, вас также заинтересует размещение Label внутри этого компонента.

Answer 2

Ошибка происходит от элемента Rectangle, где вы просите, чтобы контейнер имел размер его содержимого (с помощью знака childrenRect).Но размер вашего Text изменяется в соответствии с размером его родителя.

Он должен определять измерение Rectangle (с привязками или фиксированным размером) и вычислять измерение дочерних элементов в соответствии с родителем.