QML GridLayout 不遵守我指定的单元格安排

Question

在这段代码中，有些项目一开始是不可见的。我希望它们在我放置它们的地方 单击按钮 时可见。

为了给他们留下 space，我将其他项目放在隐藏选项可见时显示的位置。

我的问题是，当其他项目不可见时，GridLayout 不遵守代码中设置的以下单元格位置。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window {
    visible: true
    height: 500; width: 500

    GridLayout {
        id: gridLayout

        property bool secondScreenOptionsVisible: false

        property int hmmiButtonRow: 0
        property int hmmiButtonCol: 0

        Rectangle {
            id: hmmi; visible: gridLayout.secondScreenOptionsVisible
            Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
            height: 50; width: 50; color: "pink";
            Layout.alignment: Qt.AlignTop
            Text { text: "HMMI"; anchors.centerIn: parent }
        }

        property int optionsButtonRow: 1
        property int optionsButtonCol: 0

        Rectangle {
            id: optionsButton; visible: gridLayout.secondScreenOptionsVisible
            Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
            height: 50; width: 50; color: "red"
            Layout.alignment: Qt.AlignTop
            Text { text: "Options..."; anchors.centerIn: parent }
        }

        property int flipperControlRow: 3
        property int flipperControlCol: 0

        Rectangle {
            id: flipperControl;
            Layout.row :gridLayout.flipperControlRow; Layout.column: gridLayout.flipperControlCol;
            height: 200; width: 50;
            color: "brown";
            Layout.rowSpan: 4
            Layout.alignment: Qt.AlignTop
            Text { text: "Flipper"; anchors.centerIn: parent }
        }
    }
}

输出：

当所有项目都可见时：

当其他两项被隐藏时，GridLayout不遵守规则。

我希望GridLayout服从我设置的单元格位置，无论其他项目是否可见。

请帮忙。

Answer 1

文档对 GridLayout 说：

[...] It is similar to the widget-based QGridLayout. All visible children of the GridLayout element will belong to the layout. [...].

因此，您所看到的是开发人员遵循的实施方法的直接结果。实际上，可见性的变化会触发 Item 的重新定位，如 this 代码路径中所示。

您可以使用 opacity 属性 而不是考虑 visible 属性：布局考虑了不透明的 Item，导致预期的可见行为。参见这个简单的例子：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window {
    visible: true
    height: 400; width: 400

    GridLayout {
        anchors.fill: parent
        id: gridLayout
        rows: 3
        columns: 3

        Repeater {
            id: rep
            model: 9

            Rectangle {
                color: "black"
                Layout.preferredWidth: 100
                Layout.preferredHeight:  100
                Layout.alignment: Qt.AlignCenter
                opacity: index === rep.count - 1
            }
        }
    }
}

请注意，不透明 Item 仍然会呈现，这与不可见的不同，对性能的影响程度不同，具体取决于您的实际用例。