Extends Item

Column

Column is a layout container that positions its children in a vertical column.

Column {
    spacing: 2
    Rectangle {
        width: 100
        height: 50
        color: #1b91f9
    }
    Rectangle {
        width: 100
        height: 50
        color: #4da9fa
    }
    Rectangle {
        width: 100
        height: 50
        color: #7fc1fa
    }
}

property Float width

property Float height

If width is not set it will take on the value of the widest child element. If height is not set it will take on the value of the the combined height of all the child elements and any spacing that has been set.

property Float margin: 0

property Float spacing: 0

These properties define the regular space at the margin, and between each item in the column.

Column {
    spacing: 2
    Rectangle as rectangle1 {
        width: 100; height: 50
        color: #1b91f9
    }
    Rectangle as rectangle2 {
        width: 100; height: 50
        color: #4da9fa
    }
}

property Column.Distribution distribution: .Align

The distribution property controls how children are distributed in the Column.

Column.Distribution.Align

Children are aligned "tightly" from top to bottom inside the Column, respecting the margin and spacing values.

Column.Distribution.Justify

If the height of the Column exceeds the space needed align the children, the extra space is distributed evenly between them.