qt - QML 布局中的间隔项

Question

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

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

Answer 1

您可以简单地使用Itemwith 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没有间隔项的 a ，因为 aColumn只是将其子项从上到下定位，并且不展开它们以占用所有可用空间。

Answer 2

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

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"
        }
    }
}