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

我已经设置了一个名为测试1.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

    }
}

我还设置了一个名为测试2.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

    }
}

最后，我的矩形.qml有以下内容：

import QtQuick 2.6

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

我的目标是当实例我的矩形单击后，它们的高度会发生变化，并且列布局应放大以使项目保持间距。

当我跑步时test.qml，结果不是我所期望的，因为我的矩形单击时彼此重叠。然而，测试2.qml给出了所需的行为，以及实例我的矩形保持它们的间距列布局放大。

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

的（不良）行为测试1.qml:

（期望的）行为测试2.qml:

为什么我必须将对象包裹在一个Column达到想要的结果？

原因可能听起来很奇怪：

The [...]Layout-家人不仅可以安排物品，还可以调整它们的大小。您不应该在其中设置或更改尺寸。

为了完成它的工作，当您不使用可用的附加属性来设置尺寸时，它将使用implicitWidth/Height你的Items.

如果您尚未设置隐式尺寸，则在将新项目添加到布局中时，它们的隐式尺寸将设置为等于其设置的尺寸。但这不是绑定！因此，如果您现在更新height, the implicitHeight将保持原始大小，因此布局不会对更改做出反应。

如果您添加Column对于您的代表来说，事情发生了变化：Column更新其implicitHeight根据其子项的边界矩形。如果您现在调整大小Rectangles 的高度，Column将适应implicitHeight和Layout将对变化做出反应。

现在您有以下解决方案：

1. Use the Layout附加属性，用于设置和更改尺寸提示。
2. 使用代表implicitHeight而不是height。但这在语义上可能是错误的。
3. 不要使用ColumnLayout但只是常规的Column当您不需要额外的布局功能（附加属性和调整项目大小等）时，您的问题似乎就是这种情况。

Column {
    anchors.centerIn: parent
    spacing: 5

    // Header goes here

    Repeater {
        model: 3
        delegate:
            Rectangle {
                width: 150
                height: width
                color: "#44ff0000"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log(parent.implicitHeight)
                        parent.height += 50
                    }
                }

        }
    }
    // Footer goes here

}