如何为 QML 布局中的项目指定特定间距? [英] How to give specific spacing to items in a QML layout?

问题描述

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

我怎样才能将 Rectangles 添加到这个 ColumnLayout 中，从上到下有一个 特定的 间距?

现在我有这个:

列布局{anchors.fill:父级间距:2长方形 {身高:50宽度:50红色"}长方形 {身高:50宽度:50颜色:绿色"}长方形 {身高:50宽度:50颜色:蓝色"}}

但不是让矩形从上到下间隔 2，而是在 ColumnLayout 中均匀地布局 Rectangle.p>

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

解决方案

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

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

导入QtQuick 2.5导入 QtQuick.Window 2.2窗户 {可见:真宽度:100身高:200列布局 {anchors.fill:父级间距:2长方形 {身高:50宽度:50红色"}长方形 {身高:50宽度:50颜色:绿色"}长方形 {身高:50宽度:50颜色:蓝色"}Item { Layout.fillHeight: true }//<-- 这里的填充物}}

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

只要做出你的选择.

<小时>

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

I have a ColumnLayout, which has its anchor set to anchor.fill: parent, therefore it has already a set dimension, which depends on its parent dimension.

How can I add Rectangles into this ColumnLayout, with a specific spacing from top to bottom?

Right now I have this:

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

But instead of having the rectangles from top to bottom with a spacing 2 it layouts the Rectangles evenly in the ColumnLayout.

One solution would be to anchor the first rectangle to the parent's top and the anchor the rest of the rectangles one after the other, but I would like to avoid this if possible.

解决方案

Differently from previous positioners, such as Column or Row, layouts were introduced to support graphical scaling of UI, also by filling available space (in this specific case fill their parent). In that sense the spacing property should not be seen as a strict upper bound to the spacing between Items but as the minimum allowed distance between them.

The current approach to solve your issue is to use a "filler" Item, which uses the fillHeight property. This Item occupies all the space left by the other Items inside the layout thus packing them together, as needed:

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

Note that you can exploit the same approach and add a filler at the beginning of the layout to vertically center the children Items. Finally, note that in this case it would be advisable to use a Column which lays down the Items correctly as expected, disregarding the available space left.

Just make your choice.

---

It should be noted that while this approach works Layouts provide a lot of properties to control the size of the Items. Please refer to the other answer for some insight on the subject.

这篇关于如何为 QML 布局中的项目指定特定间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！