SwiftUI HStack: a closer look

Photo by Jess Bailey on Unsplash

HStack is a layout container used to layout child views in horizontal direction. Child views appear side by side from leading to trailing direction next to each other.

The Basics

Let’s start with a simple example. We will create HStack and add two child Text views.

struct HStackExample: View {
    var body: some View {
        HStack {
            Text("DevTechie")
                .font(.largeTitle)
            Text("Learn by example")
                .font(.title3)
        }
    }
}

Similar to VStack , HStack also takes only the space needed for it to display the content.

struct HStackExample1: View {
    var body: some View {
        HStack {
            Text("DevTechie")
                .font(.largeTitle)
            Text("Learn by example")
                .font(.title3)
        }
        .padding()
        .border(Color.orange)
    }
}

Nesting of HStacks