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

​
Parameters

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

​
Support

​
Usage

​
Basic lazy horizontal stack

ScrollView([
    LazyHStack([
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("red"))
            .frame({ width: 100, height: 100 }),
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("blue"))
            .frame({ width: 100, height: 100 }),
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("green"))
            .frame({ width: 100, height: 100 })
    ])
])

​
Lazy horizontal stack with spacing

ScrollView(.horizontal, [
    LazyHStack({ spacing: 20 }, [
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("red"))
            .frame({ width: 100, height: 100 }),
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("blue"))
            .frame({ width: 100, height: 100 }),
        RoundedRectangle({ cornerRadius: 8 })
            .fill(Color("green"))
            .frame({ width: 100, height: 100 })
    ])
])

ScrollView(.horizontal, [
    LazyHStack({ pinnedViews: "all", spacing: 12 }, [
        ForEach(photoGroups, (group) =>
            Section({ 
                header: Text(group.title)
                    .font("headline")
                    .rotationEffect(-90)
                    .frame({ width: 40 })
            }, [
                ForEach(group.photos, (photo) =>
                    Image({ url: photo.url })
                        .aspectRatio(1.0, contentMode: "fill")
                        .frame({ width: 150, height: 150 })
                        .cornerRadius(12)
                )
            ])
        )
    ])
])