Day 13: LazyVStack vs List – Efficient List Building in SwiftUI 🛠️

In today's post of the #30DaysOfSwift series, we’re diving into the two essential components for building lists in SwiftUI.

While both are great for displaying large amounts of content, they have distinct use cases and performance differences.

Key Differences:

LazyVStack:

• Offers a flexible, customizable layout for stacking views vertically.
• Loads content lazily as it comes into view, improving performance for large datasets.
• Provides more control over the design, allowing customization beyond what List offers.

List:

• Designed for basic, standard lists with built-in functionality like separators, row editing, and reordering.
• Ideal for quick, out-of-the-box list implementations.
• Provides automatic lazy loading but less flexibility for custom UI.

Code Example: Using LazyVStack vs List

We'll build the same list using both LazyVStack and List to see how they compare in terms of flexibility and performance.

LazyVStack Example:

import SwiftUI

struct LazyVStackExample: View {
    let items = Array(1...100) // Sample data for list

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 20) { // LazyVStack to load views lazily
                ForEach(items, id: \.self) { item in
                    HStack {
                        Text("Item \(item)")
                            .font(.headline)
                        Spacer()
                    }
                    .padding()
                    .background(Color.blue.opacity(0.1))
                    .cornerRadius(10) // Customization with rounded corners
                }
            }
            .padding()
        }
    }
}

List Example:

import SwiftUI

struct ListExample: View {
    let items = Array(1...100) // Sample data for list

    var body: some View {
        List(items, id: \.self) { item in
            HStack {
                Text("Item \(item)")
                    .font(.headline)
                Spacer()
            }
        }
        .listStyle(PlainListStyle()) // Using PlainListStyle for a simpler look
    }
}

When to Use:

LazyVStack:

• Use when you need full control over the layout or when you have a complex, customized UI.
• Best suited for building dynamic layouts, like scrollable cards or grids.

List:

• Use for quick, standard lists like settings menus, simple item lists, or when you need built-in row management (e.g., swipe-to-delete).
• Best when you need simplicity without too much custom styling.

Now that you’ve seen both approaches, choose the one that fits your app's design and performance needs!

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🌟