当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给出了所需的行为,并且当ColumnLayout放大时,MyRectangle的实例保持其间距.

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

test1.qml的(不期望的)行为:

test2.qml的(所需)行为:

为什么我必须将对象包装在一个列中以实现所需的结果？

Answer 1

原因可能听起来很奇怪:

本[...]Layout-家庭是不是就在那里安排的对象,而且要调整它们的大小.您不应该在其中设置或更改大小.

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

如果您尚未设置隐式维度,则在布局中添加新项目时,其隐式维度将设置为等于其设置的幻灯片.但这不是一个约束力!因此,如果您现在更新height,implicitHeight则将保持原始大小,因此布局不会对更改做出反应.

如果添加Column到您的委托,事情会发生变化:根据Column其子implicitHeight项的边界矩形更新它.如果你现在调整Rectangles高度,Column它将调整,implicitHeight并且Layout会对变化做出反应.

现在您有以下解决方案:

1. 使用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

}