Skip to main content
LazyVStack(children: Component): Component;
LazyVStack(children: Component[]): Component;
LazyVStack(props: { spacing?: number; alignment?: HorizontalAlignment; pinnedViews?: PinnedScrollableViews }, children: Component[]): Component;
​
children
Component | Component[]
required
A single component or array of components to arrange vertically with lazy rendering.
​
props
object
Configuration options for the lazy stack.

​
Support

​
Usage

​
Basic lazy list

Use inside a ScrollView for efficient rendering of large datasets: 
ScrollView([
    LazyVStack({ spacing: 8 }, [
        ForEach(items, (item) =>
            Text(item.name).padding(12)
        )
    ])
])

​
With pinned section headers

ScrollView([
    LazyVStack({ pinnedViews: "sectionHeaders" }, [
        Section({ header: Text("Group A").font("headline") }, [
            ForEach(groupA, (item) => Text(item.name))
        ]),
        Section({ header: Text("Group B").font("headline") }, [
            ForEach(groupB, (item) => Text(item.name))
        ])
    ])
])

​
With alignment

ScrollView([
    LazyVStack({ spacing: 12, alignment: "leading" }, [
        ForEach(messages, (msg) =>
            Text(msg.text)
                .padding(12)
                .background(Color("secondarySystemBackground"))
                .cornerRadius(8)
        )
    ])
])

​
Notes

  • LazyVStack only creates views for children that are currently visible. This is critical for performance with large data sets.
  • Always place LazyVStack inside a ScrollView. Without a scrollable parent, there is no viewport boundary to drive lazy rendering.
  • For non-lazy vertical layout, use VStack.

​
See Also