当Repeater的委托高度发生变化时，调整ColumnLayout

Question

我已经设置了一个名为 test1.qml 的文件，其中包含以下内容：

import QtQuick 2.6
import QtQuick.Layouts 1.3

Rectangle {
    width: 800; height: 1000;

    ColumnLayout {
        anchors.centerIn: parent

        // Header goes here

        Repeater {
            model: 3
            delegate: MyRectangle {
                width: 150
                height: width
                color: "#44ff0000"
            }
        }

        // Footer goes here

    }
}

我还设置了一个名为 test2.qml 的文件，其定义如下：

import QtQuick 2.6
import QtQuick.Layouts 1.3

Rectangle {
    width: 800; height: 1000;

    ColumnLayout {
        anchors.centerIn: parent

        // Header goes here

        Repeater {
            model: 3
            delegate: Column {
                MyRectangle {
                    width: 150
                    height: width
                    color: "#44ff0000"
                }
            }
        }

        // Footer goes here

    }
}

最后， MyRectangle.qml 具有以下内容：

import QtQuick 2.6

Rectangle {
    MouseArea {
        anchors.fill: parent
        onClicked: {
            parent.height += 50
        }
    }
}

我的目标是，当点击 MyRectangle 的实例时，它们的高度会发生变化，而 ColumnLayout 会放大，以便项目保持其间距。

当我运行 test.qml 时，结果不符合我的预期，因为 MyRectangle 的实例在点击时会相互重叠。但是， test2.qml 会提供所需的行为， MyRectangle 的实例会在 ColumnLayout 放大时保持其间距。

根据derM的要求，我认为下面的GIF可能有助于更清楚地解释这一点。

test1.qml 的<不受欢迎的行为：

test2.qml 的（所需）行为：

为什么我必须将对象包装在列中以获得所需的结果？