SwiftUI HStack: a closer look

DevTechie
DevTechie
Published in
6 min readNov 3, 2021

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

DevTechie
DevTechie

Published in DevTechie

DevTechie.com is all about sharing knowledge by practical means. We focus on solving real world challenges via code.

No responses yet

What are your thoughts?