How to set a specific spacing for elements in a QML layout?

Question

I have one ColumnLayoutthat has the anchor set on anchor.fill: parent, so it already has a given dimension, which depends on its parent dimension.

How to add Rectanglesto this ColumnLayoutwith a certain interval from top to bottom?

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 rectangles from top to bottom with an interval 2, it evenly splits Rectangleinto ColumnLayout.

One solution would be to snap the first rectangle to the top of the parent and snap the remaining rectangles one by one, but I would like to avoid this if possible.

Answer 1

, Column Row, , ( ). spacing Item, .

- "filler" 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. , , Column, Item , , .

.

---

, , Layout, Item s. . .

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