Stack Customization

alignment

By using alignment, you can place the child of the stack you are on at 9 points of the grid.

VStack({alignment: "hereAlignment" })()

cTop

Center and top alignment

VStack({alignment: cTop})(
    Text("Hello World")
)

cTopLeading

Left and top alignment

VStack({alignment: cTopLeading})(
    Text("Hello World")
)

cTopTrailing

Right and top alignment

HStack({alignment: cTopTrailing})(
    Text("Hello World")
)

cLeading

Center and left

HStack({alignment: cLeading})(
    Text("Hello World")
)

cTrailing

Center and right

HStack({alignment: cTrailing})(
    Text("Hello World")
)

Spacing

Throws a space between each view except the space below the subview

HStack({ spacing: 50 })(
    VStack({ spacing: 50 })(
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
    ),
    VStack({ spacing: 50 })(
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
    ),
    VStack({ spacing: 50 })(
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
        HStack().width(100).height(100).background("red"),
    ),
)