Extends Item

Row

Row is a layout container that positions its children in a horizontal row.

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

property Float width

property Float height

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

If height is not set it will take on the value of the tallest child element.

property Float margin: 0

property Float spacing: 0

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

property Row.Distribution distribution: .Align

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

Row.Distribution.Align

Children are aligned "tightly" from left to right inside the Row, respecting the margin and spacing values.

Row.Distribution.Justify

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