未填充 ColumnLayout 中的完整列高答案

【问题标题】：Not filling full column height in ColumnLayout未填充 ColumnLayout 中的完整列高
【发布时间】：2018-12-11 14:47:46
【问题描述】：

我有一个简单的 QML 设计，它由 2 个并排的组件组成，然后是下面的另一个组件（名为 HUD）。 HUD 应该填充剩余的高度，但它会留下一个间隙。

如何让 HUD 填充所有可用宽度。我正在尝试实现第二张图片。

Page {
    width: parent.width
    height: parent.height

    title: qsTr("Home")

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            Layout.fillWidth: true;

            StatusBar {
                width: parent.width * 0.5;
                height: parent.height * 0.1
                anchors.left: parent.left;
            }

            MenuBar {
                width: parent.width * 0.5;
                height: parent.height * 0.1
                anchors.right: parent.right;
            }
        }

        // The below should fill the remaining height but its not?
        HUD {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

    }
}

【问题讨论】：

标签： qt qml qtquickcontrols2

【解决方案1】：

将Layout.fillHeight: false 添加到您的 RowLayout 中，您应该一切顺利。默认情况下，对于 Layouts，Layout.fillHeight 和 Layout.fillWidth 为 true。

    RowLayout {
        Layout.fillWidth: true;
        Layout.fillHeight: false;

        StatusBar {
            width: parent.width * 0.5;
            height: parent.height * 0.1
            anchors.left: parent.left;
        }

        MenuBar {
            width: parent.width * 0.5;
            height: parent.height * 0.1
            anchors.right: parent.right;
        }
    }

【讨论】：