QtQuick layout margins

Question

Is there any way to remove start and end margins in QML Layout components?

Here is an example of ColumnLayout with a couple of children. The question is how to remove those top and bottom margins and redistribute all children along full height of parent layout.

ColumnLayout {
    id: dotColumn
    anchors.horizontalCenter: bg.horizontalCenter
    height: root.height
    Repeater {
        id: repeater
        model: root.model

        Item {
            id: activeDot_container

            property int radius: 15
            width: radius * 2
            height: radius * 2

            Rectangle {
                anchors.centerIn: parent
                radius: parent.radius

                width: radius * 2
                height: radius * 2

                color: Palette.colors['deepPurple']['500']
            }
        }
    }
}

Answer 1

After a couple of experiments with layout positioning I've come with following solution.

Assuming that margins I want to eliminate have size of a half of spacing between layout children, we can set negative margins to the beginning and the end of layout component, stretching it till first and last children align at start/end of layout.

Function I used to calculate margins:

function getMargin() {
  var height = root.height;
  var spacing = (height - root.radius * 2 * model.length) / model.length;
  return spacing / 2;
}

Where root is a parent of Layout component, root.radius*2 represents size of layout child item and can be replaced with another child dimension and model.length stands for children count.

Then we can just set anchors for Layout component and set corresponding margins.

ColumnLayout {
    anchors.top: root.top
    anchors.bottom: root.bottom
    anchors.topMargin: -1 * getMargin()
    anchors.bottomMargin: -1 * getMargin()
    Repeater {
        model: root.model
        Item {
            property int radius: root.radius
            width: radius * 2
            height: radius * 2
            /* more code */
        }
    }
}

P.S. Same solution can be applied to RowLayout by replacing layout top/bottom anchors with left/right.

Answer 2

You cannot align item inside Layout both to top and to bottom. As a workaround you can put item with variable y inside container as shown below:

Window {
    visible: true
    visibility: Window.Maximized

    ColumnLayout {
        anchors.horizontalCenter: parent.horizontalCenter
        height: parent.height
        spacing:1
        Repeater {
            id: repeater
            model: 10
            Rectangle {
                color: "green"
                property int radius: 15
                width: radius
                Layout.fillHeight: true
                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: index * (parent.height - height) / (repeater.count - 1)
                    radius: parent.radius
                    width: radius * 2
                    height: radius * 2
                    color: "blue"
                }
            }
        }
    }
}