VerticalLayout

export component Foo inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; vertical-stretch: 1; }
        Rectangle { background: green; vertical-stretch: 2; }
    }
}

slint

Places its children next to each other vertically. The size of elements can either be fixed with the width or height property, or if they aren’t set they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.

Spacing Properties

spacing

length default: 0px

The distance between the elements in the layout.

Padding Properties

padding

length default: 0px

The padding within the layout as a whole. This single value is applied to all sides.

To target specific sides with different values use the following properties:

padding-left

length default: 0px

padding-right

length default: 0px

padding-top

length default: 0px

padding-bottom

length default: 0px

Alignment Properties

alignment

enum LayoutAlignment default: the first enum value

Set the alignment along the main (vertical) axis. Matches the CSS flex box.

align-items

enum LayoutAlignItems default: the first enum value

Set the alignment of items along the cross (horizontal) axis. The default is stretch, meaning each item fills the full width of the layout. The other values (start, end, center) size each item to its preferred width, clamped to its min/max, and position it at the left, right, or center of the layout’s content box.

export component Example inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        align-items: end;
        Rectangle { background: red; preferred-width: 30px; preferred-height: 20px; }
        Rectangle { background: blue; preferred-width: 60px; preferred-height: 20px; }
        Rectangle { background: green; preferred-width: 90px; preferred-height: 20px; }
    }
}

slint