Skip to main content
LazyVStack(children: Component): Component;
LazyVStack(children: Component[]): Component;
LazyVStack(props: { spacing?: number, alignment?: HorizontalAlignment, pinnedViews?: PinnedScrollableViews }, children: Component[]): Component;

​
Parameters

​
props.spacing
number
The vertical spacing between items.
​
props.alignment
HorizontalAlignment
The horizontal alignment of items (e.g., “leading”, “center”, “trailing”).
​
props.pinnedViews
PinnedScrollableViews
Views to pin during scrolling. Options are “sectionHeaders”, “sectionFooters”, or “all”.
​
children
Component | Component[]
The items to display in the lazy vertical stack.

​
Support

​
Usage

​
Basic lazy vertical stack

ScrollView([
    LazyVStack([
        Text("Item 1"),
        Text("Item 2"),
        Text("Item 3"),
        Text("Item 4"),
        Text("Item 5")
    ])
])

​
Lazy vertical stack with spacing

ScrollView([
    LazyVStack({ spacing: 16 }, [
        Text("Item 1"),
        Text("Item 2"),
        Text("Item 3"),
        Text("Item 4"),
        Text("Item 5")
    ])
])

​
Lazy vertical stack with pinned section headers

ScrollView([
    LazyVStack({ pinnedViews: "sectionHeaders" }, [
        Section({ header: Text("Section 1").font("headline") }, [
            Text("Item 1.1"),
            Text("Item 1.2"),
            Text("Item 1.3")
        ]),
        Section({ header: Text("Section 2").font("headline") }, [
            Text("Item 2.1"),
            Text("Item 2.2"),
            Text("Item 2.3")
        ])
    ])
])

​
Large dataset with ForEach

ScrollView([
    LazyVStack({ spacing: 8, pinnedViews: "sectionHeaders" }, [
        ForEach(dataGroups, (group) =>
            Section({ header: Text(group.title).font("headline") }, [
                ForEach(group.items, (item) =>
                    Text(item.name)
                )
            ])
        )
    ])
])