qt - 当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
        }
    }
}

我的目标是当 的实例我的矩形 被点击，它们的高度改变， 栏目布局应该放大，以便项目保持它们的间距。

当我运行 test.qml ，结果不是我所期望的，因为 的实例我的矩形 单击时相互重叠。但是， test2.qml 给出所需的行为，以及 的实例我的矩形 保持它们的间距为 栏目布局放大。

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

的(不良)行为test1.qml :



的(期望的)行为test2.qml :



为什么我必须将对象包装在 中专栏 达到预期的效果？

Answer 1

原因可能听起来很奇怪:
[...]Layout -family 不仅可以安排元素，还可以调整它们的大小。您不应该在其中设置或更改大小。

为了完成它的工作，当您不使用可用的附加属性来设置大小时，它将使用 implicitWidth/Height您的Item s。

如果您没有设置隐式尺寸，则在向布局添加新项目时，它们的隐式尺寸将设置为等于它们设置的尺寸。但这不是绑定(bind)!因此，如果您现在更新 height , implicitHeight将保持原始大小，因此布局不会对更改使用react。

如果添加 Column对您的代表来说，情况发生了变化:Column更新其implicitHeight根据其 child 的边界矩形。如果您现在调整 Rectangle 的大小s 高度，Column将适应 implicitHeight和 Layout会对变化使用react。

现在您有以下解决方案:

使用 Layout附加属性，设置和更改大小提示。

使用代表 implicitHeight而不是 height .不过，这可能在语义上是错误的。

不要使用 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

}