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! π
Top comments (0)