How to Add HStack with Spacing in iOS SwiftUI

Creating clean, well-spaced layouts is crucial in developing aesthetically pleasing mobile applications. SwiftUI’s HStack is a key player in this mission. In this blog post, we’ll dig deep into mastering spacing in SwiftUI HStack.

What is SwiftUI’s HStack?

HStack is a SwiftUI container that arranges its child views in a horizontal line. To enhance its appearance and improve readability, you might want to adjust the spacing between these child views.

How to Control Spacing in HStack

The HStack initializer comes with a ‘spacing’ parameter. This parameter allows you to control the spacing between the child views within the HStack. The value of the spacing parameter is of Double type, which can be any number or nil.

Step 1: Create an HStack

First, create an HStack with some Text views.

HStack {
  Text("Hello")
  Text("SwiftUI")
}

Step 2: Control Spacing

To control the spacing, add the ‘spacing’ parameter to your HStack.

HStack(spacing: 20) {
  Text("Hello")
  Text("SwiftUI")
}

In this case, the space between “Hello” and “SwiftUI” is 20 points.

Managing Default Spacing

Without specifying a ‘spacing’ parameter, SwiftUI uses a default value. However, if you want no spacing, set the spacing parameter to zero.

HStack(spacing: 0) {
  Text("Hello")
  Text("SwiftUI")
}

In this code, “Hello” and “SwiftUI” will be directly adjacent to each other.

SwiftUI’s HStack is a crucial layout component. Understanding how to manage spacing between its child views will allow you to create cleaner and more appealing interfaces. Remember, good design is often in the details.