VStack(children: Component): Component;
VStack(children: Component[]): Component;
VStack(props: { spacing?: number; alignment?: HorizontalAlignment }, children: Component[]): Component;
children
Component | Component[]
required
A single component or array of components to arrange vertically.
Configuration options for the stack layout.
The distance in points between adjacent children. When omitted, the system uses a default spacing.
The horizontal alignment of children within the stack. One of "leading", "center", or "trailing". Defaults to "center".
Support
Usage
Basic stack
VStack([
Text("First"),
Text("Second"),
Text("Third")
])
With spacing and alignment
VStack({ spacing: 16, alignment: "leading" }, [
Text("Title").font("headline"),
Text("Subtitle").foregroundStyle(Color("secondary"))
])
Nested layout
VStack({ spacing: 24 }, [
HStack({ spacing: 12 }, [
Image({ systemName: "person.fill" }),
Text("Profile")
]),
Divider(),
Text("Welcome back!")
.font("body")
])
With spacers
VStack([
Text("Top"),
Spacer(),
Text("Bottom")
])
.frame({ maxHeight: ".infinity" })
See Also