带有 fillHeight 组件的 top/bottomMargin答案

【问题标题】：top/bottomMargin with fillHeight components带有 fillHeight 组件的 top/bottomMargin
【发布时间】：2020-11-17 00:54:41
【问题描述】：

我遇到了一个关于布局内组件的顶部/底部边距的问题（此处为 GridLayout，但它似乎与 ColumnLayout 相同）与 fillHeight。

考虑以下示例：

import QtQuick 2.0
import QtQuick.Layouts 1.2

Item {
    width : 800
    height : 480
    GridLayout {
        anchors.fill: parent
        columns: 2
        rows : 2
        Rectangle {
            color:"red"
            Layout.fillHeight: true
            width : 400
        }
        Rectangle {
            color:"green"
            Layout.rowSpan: 2
            Layout.fillHeight: true
            width : 400
        }
        Rectangle {
            color:"blue"
            Layout.fillHeight: true
            width : 400
            Layout.bottomMargin: 10
        }
    }
}

` 显示为。

只需注释“Layout.bottomMargin: 10”行即可重新建立红色和蓝色矩形之间的比例：

当我猜测它不应该时，似乎有一个比率考虑了边距。事实上，蓝色矩形的高度似乎是（上边距+下边距）*红色矩形的高度（我已经用十几个值进行了测试，可能还不够）。

【问题讨论】：

标签： qt qml

【解决方案1】：

布局引擎确实使用implicitHeight 来计算结果大小。由于 Rectangle 的implicitHeight 为 0，蓝色矩形将是红色矩形的 10 倍。您可以在矩形上设置implicitHeight 玩一点：

Item {
    width : 800
    height : 480
    GridLayout {
        anchors.fill: parent
        columns: 2
        rows : 2
        Rectangle {
            color:"red"
            Layout.fillHeight: true
            implicitHeight: 200
            width : 400
            onHeightChanged: console.log("red", height)
        }
        Rectangle {
            color:"green"
            Layout.rowSpan: 2
            Layout.fillHeight: true
            width : 400
        }
        Rectangle {
            color:"blue"
            implicitHeight: 200
            Layout.fillHeight: true
            width : 400
            Layout.bottomMargin: 10
            onHeightChanged: console.log("blue", height)
        }
    }
}

但是，这感觉像是一个肮脏的解决方案。结果大小取决于implicitHeight 集，但不完全取决于。基本上你在布局引擎的计算中改变了 bottomMargin 的“权重”。

要制作一个不脏的解决方案，您可以将蓝色 Rectangle 放在 Item 中，并将蓝色 Rectangle 锚定到它的底部边距。（因此，项目中没有 Layout.bottomMargin）。但这在一定程度上取决于您想要的最终结果，因为蓝色矩形会比红色矩形小。

【讨论】：

【解决方案2】：

感谢回复！

是的，对我来说，放置implicitHeight 绝对是一个肮脏的解决方案，我不能真正将它应用到我的应用程序中。

另一种解决方案与我想的差不多。不同之处在于我放置了一个 ColumnLayout 填充其父级（使用 rowSpan：2）并包含红色和蓝色 Rectangles，并且我在其中请求 Layout.bottomPadding。这样就可以了。

这只是一种解决方法，适用于我想做的事情，但是有了这个，如果不使用间距，就无法在蓝色矩形上设置 topMargin。但正如我所说，这对我来说很好。

因为蓝色的矩形会比红色的小

是的，我知道这一点，这正是我所期望的。而我的解决方案也存在这种高度差异。

编辑：不，我完全误会了最后一点，事实上，对于 ColumnLayout，红色和蓝色将是相同的大小：with a layout

【讨论】：