shaffex

VStac is a view that arranges its children in a vertical line. The alignment parameter determines how the views are aligned horizontally.

Parameters:

alignment (optional) This parameter determines the horizontal alignment of the views within the VStack. It’s of type HorizontalAlignment and can take the following values:

leading Aligns the views along the leading edge, which is the left edge in left-to-right languages like English.
center Aligns the views along the center.
trailing Aligns the views along the trailing edge, which is the right edge in left-to-right languages.

Default value: center

spacing (optional) This parameter determines the vertical spacing between the views.

Default value: System default spacing

Examples

<body>
    <vstack>
        <circle foregroundColor="red"/>
        <circle foregroundColor="green"/>
        <circle foregroundColor="blue"/>
    </vstack>
</body>

Screenshot

With no spacing

<body>
    <vstack spacing="0">
        <rectangle foregroundColor="red"/>
        <rectangle foregroundColor="green"/>
        <rectangle foregroundColor="blue"/>
    </vstack>
</body>

Screenshot

Combined with hstack

<body>
    <hstack>
        <rectangle foregroundColor="yellow"/>
        <vstack>
            <rectangle foregroundColor="red"/>
            <rectangle foregroundColor="green"/>
            <rectangle foregroundColor="blue"/>
        </vstack>
        <rectangle foregroundColor="yellow"/>
    </hstack>
</body>

Screenshot

Combined with hstack

<body>
    <foreach repeatCount="8">
        <hstack>
            <rectangle foregroundColor="red"/>
            <rectangle foregroundColor="orange"/>
            <rectangle foregroundColor="red"/>
        </hstack>
    </foreach>
</body>

Screenshot