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.
LazyVStack:
List:
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
}
}
LazyVStack:
List:
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! 🌟