QML矩形：检测到属性“宽度” /“高度”的绑定循环

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矩形：检测到属性“宽度”的绑定环

     

qrc：/main.qml：13：19：QML矩形：检测到属性“ height”的绑定环

绑定循环在哪里以及如何解决？

Answer 1

错误来自项目Rectangle，您在其中要求容器具有其内容的大小（通过使用childrenRect）。但是，您的Text会根据其父项的大小进行调整。

它应该定义Rectangle维度（具有锚点或固定大小），并根据父维度计算子维度。

Answer 2

通常不会将delegate的宽度绑定到其内容（childrenRect）。在大多数情况下，您需要parent的{​​{1}}并固定（或在极少数情况下是动态的）width。查看this示例-我使用height来调整宽度并固定anchors为80：

height

您可能还对anchors { left: parent.left right: parent.right } height: 80 在此组件内部的位置感兴趣。