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

Posted 2023-02-16

【中文标题】如何为 QML 布局中的项目指定特定间距？

【英文标题】：How to give specific spacing to items in a QML layout?

【发布时间】：2016-02-23 20:42:22

【问题描述】：

我有一个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 中。

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

【问题讨论】：

我相信这个问题的名称有点误导。对于那些希望为列中的特定项目超载spacing 的人，您可以替换spacing 并改用Layout.margins（以及相关联的Layout.bottomMargin、Layout.topMargin 等）。

【参考方案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 了解有关该主题的一些见解。

【讨论】：

感谢您的详细解答！

【参考方案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"