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. Matches the CSS flex box.