Skip to main content

VStack

A component that arranges its children in a vertical line.

component VStack
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)
    }
}

VStack Example

Constructor​

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.