Skip to main content

How to use implicit stacking

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

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)
        }
    }
}

Download this as an Xcode projectopen in new window

A list of three rows with an image of Paul Hudson beside the word “Anonymous”.
A list of three rows with an image of Paul Hudson beside the word “Anonymous”.

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

이찬희 (MarkiiimarK)
Never Stop Learning.