How to use implicit stacking
About 2 min
How to use implicit stacking êŽë š
SwiftUI by Example
Back to Home
How to use implicit stacking | SwiftUI by Example
How to use implicit stacking
Updated for Xcode 15
What happens if you create a dynamic list and put more than one thing in each row? SwiftUI's solution is simple, flexible, and gives us great behavior by default: it creates an implicit HStack
to hold your items, so they automatically get laid out horizontally.
As an example, we could create a row where we had a small picture on the left and the remaining space be allocated to a text field, then create an array of three users and show them in a dynamic list.
Here's how that looks in code:
// An example struct to hold some data
struct User: Identifiable {
let id = UUID()
let username = "Anonymous"
}
// A view to create and show that data in a list
struct ContentView: View {
let users = [User(), User(), User()]
var body: some View {
List(users) { user in
Image("paul-hudson")
.resizable()
.frame(width: 40, height: 40)
Text(user.username)
}
}
}
Notice how we don't need to place the image and text views into a HStack
to have them rendered side by side â SwiftUI figures it out for us.
Similar solutionsâŠ
SwiftUI tips and tricks | SwiftUI by Example
SwiftUI tips and tricks
What's the difference between @ObservedObject, @State, and @EnvironmentObject? | SwiftUI by Example
What's the difference between @ObservedObject, @State, and @EnvironmentObject?
All SwiftUI property wrappers explained and compared | SwiftUI by Example
All SwiftUI property wrappers explained and compared
Displaying a detail screen with NavigationLink | SwiftUI by Example
Displaying a detail screen with NavigationLink
How to use @ObservedObject to manage state from external objects | SwiftUI by Example
How to use @ObservedObject to manage state from external objects