VStack

A component that arranges its children in a vertical line.

component VStack

Example

import { VStack, Rectangle, Frame } from ui

// Create 10px gaps between children
export var main = VStack(spacing: 10) {
    // Fixed size
    Rectangle(color: Color(0xFF8E0000)) with {
        Frame(width: 48, height: 24)
    }

    Rectangle(color: Color(0xFFC62828)) with {
        Frame(width: 24)
    }

    // Fixed size
    Rectangle(color: Color(0xFFFF5F52)) with {
        Frame(width: 48, height: 24)
    }
}

Constructor

constructor(spacing: Float = 0, alignment: HorizontalAlignment = HorizontalAlignment.center, children: Template())

spacing: Float = 0

The gap between each child component.

alignment: HorizontalAlignment = HorizontalAlignment.center

The horizontal alignment of child components if they have less width than the overall width.

See HorizontalAlignment

children: Template()

The children to be arranged.

The children property doesn't have to be listed explicitly. Instead you can simply have a trailing block, like in the example above.

Layout Behavior

The VStack's height reflects the sum of the heights of all children and spacing. Its width is the maximum width of its children.