LazyVStack and LazyHStack in iOS Swift

Introduction

LazyVStack and LazyHStack help show many items in a list without slowing down your app. They only create views when needed.

When you want to show a long vertical list of items that scrolls smoothly.

When you want to show a long horizontal list of items that scrolls smoothly.

When you want to save memory by not creating all views at once.

When you want your app to stay fast even with many items on screen.

Syntax

iOS Swift

LazyVStack(alignment: .leading, spacing: 10) {
    // Your views here
}

LazyHStack(alignment: .top, spacing: 10) {
    // Your views here
}

LazyVStack arranges views vertically, one below another.

LazyHStack arranges views horizontally, side by side.

Examples

A simple vertical stack with three text items.

iOS Swift

LazyVStack {
    Text("Apple")
    Text("Banana")
    Text("Cherry")
}

A horizontal stack with three icons spaced apart.

iOS Swift

LazyHStack(spacing: 20) {
    Image(systemName: "star")
    Image(systemName: "heart")
    Image(systemName: "moon")
}

Use LazyVStack inside ScrollView to show many items vertically without slowing down.

iOS Swift

ScrollView {
    LazyVStack(alignment: .center, spacing: 5) {
        ForEach(0..<100) { number in
            Text("Item \(number)")
        }
    }
}

Use LazyHStack inside horizontal ScrollView for many items side by side.

iOS Swift

ScrollView(.horizontal) {
    LazyHStack(spacing: 15) {
        ForEach(0..<50) { number in
            Text("\(number)")
                .padding()
                .background(Color.blue.opacity(0.3))
                .cornerRadius(8)
        }
    }
}

Sample App

This app shows a vertical scrollable list of 20 items using LazyVStack. Each item is styled with padding and background color.

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 12) {
                ForEach(1...20, id: \.self) { number in
                    Text("Item number \(number)")
                        .font(.headline)
                        .padding()
                        .background(Color.yellow.opacity(0.3))
                        .cornerRadius(10)
                }
            }
            .padding()
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Important Notes

Lazy stacks create views only when they appear on screen, saving memory and improving speed.

Use LazyVStack for vertical lists and LazyHStack for horizontal lists inside ScrollView.

Common mistake: Using VStack or HStack for many items can slow down your app because all views are created at once.

Summary

LazyVStack and LazyHStack help show many items efficiently by creating views only when needed.

Use them inside ScrollView to make smooth scrolling lists.

They save memory and keep your app fast with large lists.