如何为 QML 布局中的项目指定特定间距？

Question

我有一个ColumnLayout，它的锚点设置为anchor.fill: parent，因此它已经设置了一个维度，这取决于它的父维度。

如何将Rectangles 添加到此ColumnLayout 中，并具有特定 从上到下的间距？

现在我有这个：

ColumnLayout {
  anchors.fill: parent
  spacing: 2

  Rectangle {
    height: 50
    width: 50
    color: "red"
  }
  Rectangle {
    height: 50
    width: 50
    color: "green"
  }
  Rectangle {
    height: 50
    width: 50
    color: "blue"
  }
}

但不是让矩形从上到下间隔2，而是将Rectangles 均匀地布置在ColumnLayout 中。

一种解决方案是将第一个矩形锚定到父对象的顶部，然后将其余矩形一个接一个地锚定，但如果可能的话，我想避免这种情况。

Answer 1

与以前的定位器（例如Column 或Row）不同，引入了布局以支持 UI 的图形缩放，也可以通过填充可用空间（在此特定情况下填充其父级）。从这个意义上说，spacing 属性不应被视为Items 之间间距的严格上限，而是它们之间的最小允许距离。

当前解决问题的方法是使用“填充”Item，它使用fillHeight 属性。这个Item 占据了布局内其他Items 留下的所有空间，从而根据需要将它们打包在一起：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true

    width: 100
    height: 200

    ColumnLayout {
        anchors.fill: parent
        spacing: 2

        Rectangle {
            height: 50
            width: 50
            color: "red"
        }
        Rectangle {
            height: 50
            width: 50
            color: "green"
        }
        Rectangle {
            height: 50
            width: 50
            color: "blue"
        }
        Item { Layout.fillHeight: true }    // <-- filler here
    }
}

请注意，您可以利用相同的方法并在布局的开头添加填充物以垂直居中子级Items。最后，请注意，在这种情况下，建议使用Column，它按预期正确放置Items，而忽略剩余的可用空间。

只要做出你的选择。

---

应该注意，虽然这种方法有效，但Layouts 提供了很多属性来控制Items 的大小。请参阅other answer 了解有关该主题的一些见解。

Answer 2

接受的答案是一种有效的方法，但还有其他方法。

1)ColumnLayout自己决定高度

如果您只是想将项目从上到下放在一列中，则无需强制 ColumnLayout 的高度。

而不是 anchors.fill: parent 采用 width: parent.width

并让 ColumnLayout 自己调整大小以适应其内容，如下所示：

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true

    width: 100
    height: 200

    ColumnLayout {
        width: parent.width
        spacing: 2

        Rectangle {
            height: 50
            width: 50
            color: "red"
        }
        Rectangle {
            height: 50
            width: 50
            color: "green"
        }
        Rectangle {
            height: 50
            width: 50
            color: "blue"
        }
    }
}

2) ColumnLayout 调整项目的大小以达到所需的间距。

如果项目太多或太少而无法完美填充布局，您可以允许布局调整项目大小（而不是调整间距）。

以下附加属性控制布局如何处理您的项目，在决定什么可以拉伸或收缩以适应布局时：

• Layout.preferredHeight
• Layout.minimumHeight
• Layout.maximumHeight
• Layout.fillHeight

例如，Rectangles 被稍微放大以达到所需的间距：

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true

    width: 100
    height: 200

    ColumnLayout {
        anchors.fill: parent
        spacing: 2

        Rectangle {
            Layout.fillHeight: true
            Layout.preferredHeight: 50
            width: 50
            color: "red"
        }
        Rectangle {
            Layout.fillHeight: true
            Layout.preferredHeight: 50
            width: 50
            color: "green"
        }
        Rectangle {
            Layout.fillHeight: true
            Layout.preferredHeight: 50
            width: 50
            color: "blue"
        }
    }
}