QML 布局中的间隔项

Question

我想在QML 中创建一个布局，并且我想添加一个间隔项（下图中选择的底部项），就像您使用这样的小部件一样：

但是我在QtQuick 方面找不到任何适合这种情况的东西……是否可以在QML 中使用这种布局而不使用锚定系统？ 我更喜欢布局方法...

Answer 1

您可以简单地将Item 与Layout.fillHeight: true 一起使用：

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    ColumnLayout {
        anchors.fill: parent
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Label {
            Layout.fillWidth: true
            text: "TextLabel"
        }
        Item {
            // spacer item
            Layout.fillWidth: true
            Layout.fillHeight: true
            Rectangle { anchors.fill: parent; color: "#ffaaaa" } // to visualize the spacer
        }
    }
}

编辑：或者在这里，您可以使用没有间隔项的 Column，因为 Column 只是将其子项从上到下定位，而不是分散它们以占用所有可用空间。

Answer 2

对于那些来自 Qt 小部件和比较的人：QML 中针对这种情况的预期解决方案是问题提到的anchoring system。在这种情况下，它看起来如下，我认为它还不错:)

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true

    ColumnLayout {
        // anchors.fill sets all four directional anchors.
        // Loosening one yields the space at the bottom.
        anchors.fill: parent
        anchors.bottom: undefined

        // Alternative approach: only set the three anchors we want.
//      anchors.top: parent.top
//      anchors.left: parent.left
//      anchors.right: parent.right

        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Label {
            Layout.fillWidth: true
            text: "TextLabel"
        }
    }
}