QML 布局中的间隔项

Question

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

但是我在 QtQuick 方面找不到适合这个的东西...是否可以使用 QML w/o 中的这种布局锚定系统？我更喜欢布局方法...

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

编辑：或者在这里，您可以使用没有 spacer 项的 Column，因为 Column 只是将其子项从上到下定位，而不是展开它们获取所有可用的 space.

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

QML 布局中的间隔项

Spacer Item in QML Layouts

qt

qml

qt5

qtquick2

qtquickcontrols2