如何为 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而是将Rectangle均匀地布局在ColumnLayout中。

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

Answer 1

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

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

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

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

只需做出您的选择。

---

应该注意的是，虽然这种方法有效Layout但提供了许多属性来控制Item的大小。请参阅另一个答案以获取有关该主题的一些见解。

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） 列布局调整项目大小以达到所需的间距。

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

以下附加属性控制布局如何处理您的项目，在决定可以拉伸或缩小哪些内容以适应布局时：

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

例如，Rectangle s 略微放大以达到所需的间距：

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