QML 在 GridLayout 中，如何将不可见的单元格约束为 0 高度？答案

【问题标题】：QML In a GridLayout, how to constraint a cell with an invisible to have a 0 height?QML 在 GridLayout 中，如何将不可见的单元格约束为 0 高度？
【发布时间】：2021-01-08 14:49:51
【问题描述】：

我有一个这样布局的 GridLayout：

AAAA
光盘
中电
中电
中电
中锋
CG
哈哈哈

E 有Layout.fillHeight: true，F 有首选高度，
D 和 G 可以隐藏，并根据它们的内容设置一个 preferredHeight：

Item {
    Layout.row: 2
    Layout.column: 2            
    Layout.columnSpan: 1
    Layout.rowSpan: 1

    id : D
    visible : false
    Layout.preferredWidth : layConfig.implicitWidth + 10
    Layout.preferredHeight : layConfig.implicitHeight + 10
    anchors.margins : 20
    Grid {
        id : layConfig
        ...
        }

当 D 和 G 可见时，它们的大小正确。但是当它们不可见时，它们会被空白空间代替，而不是高度为 0 的单元格。

AAAA
C
C
中电
中电
中锋
CG
哈哈哈

虽然这是预期的：

AAAA
中电
中电
中电
中电
中锋
CG
哈哈哈

现在，我只是在 GridLayout 中添加了一个额外的 ColumnLayout 来管理元素 D->G。在短期内它是有效的，但从长远来看它会使整个代码复杂化。

在单元格被隐藏的情况下，如何使用纯 GridLayout 强制将高度设为 0？

【问题讨论】：

我想我不明白你想要的结果是什么。在您的最终图表中，您是否更喜欢将 EEFG 全部向上移动到第一个图表中 DE 所在的空白单元格中？也就是说，您希望它们向上移动 2 行吗？如果是这样，您将不得不手动重新排列 GridLayout 的子级来执行此操作。 GridLayouts 强制一行的所有单元格的高度相同，因此使单元格的内容不可见并不会删除现在为空的单元格。
我编辑了我的示例。我希望当 D 不可见时，E（在 fullHeight:true 处）占据 D 留下的位置。第 2 行只是折叠到 0 高度，而不是我无法控制的高度。没关系，对于列 C，因为有一个行跨度。

标签： qt qml grid-layout

【解决方案1】：

由于您已经设置了 D 单元的 preferredHeight，您可以扩展绑定以包括单元的可见性：

Layout.preferredWidth : D.visible ? layConfig.implicitWidth + 10 : 0

由于您没有显示其余代码，因此可能需要进行一些额外的调整，但这应该更进一步。例如，rowSpan 可能必须针对 C 进行调整，也许您正在使用 Layout.row？

【讨论】：