如何为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垂直居中。最后请注意，在这种情况下，建议使用Column按预期正确放下Item，忽略剩余的可用空间。

只需做出选择。

应该注意的是，虽然这种方法有效Layout s提供了很多属性来控制Item的大小。有关该主题的一些见解，请参阅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

示例，其中Rectangle略微放大以获得所需的间距：

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