如何为 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 的图形缩放，也通过填充可用 space（在这种情况下填写他们的 parent）。从这个意义上说，spacing 属性不应被视为 Item 之间间距的严格上限，而是 之间允许的最小距离 他们。

目前解决您问题的方法是使用 "filler" Item，它使用 fillHeight 属性。这个 Item 占据布局内其他 Item 留下的所有 space，因此根据需要将它们打包在一起：

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

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

只做你的选择。

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

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

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

How to give specific spacing to items in a QML layout?

qt

qml

qt5

qtquick2

1）`ColumnLayout`自己决定身高

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

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

How to give specific spacing to items in a QML layout?

qt

qml

qt5

qtquick2

1）ColumnLayout自己决定身高

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

1）`ColumnLayout`自己决定身高