How to Implement HStack Alignment in iOS SwiftUI

Layout components are the backbone of SwiftUI and understanding them thoroughly is crucial for any developer. In this post, we’ll focus on SwiftUI’s HStack and its alignment options.

Decoding HStack

HStack, or horizontal stack, is a SwiftUI layout view that arranges its child views along the horizontal axis. Alignment of these child views within an HStack is a valuable aspect and it can be customized according to the requirements.

Align Elements in HStack

SwiftUI’s HStack constructor comes with an alignment parameter that provides various options to align the child views. Let’s break down these options.

Top Alignment

When you want all elements in your HStack to be aligned to the top, use .top as the alignment parameter.

HStack(alignment: .top) {
  Text("Hello")
  Text("SwiftUI")
}

Center Alignment

The default alignment option is .center. If you need your elements to be centered vertically, you can use this alignment.

HStack(alignment: .center) {
  Text("Hello")
  Text("SwiftUI")
}

Bottom Alignment

To align all elements to the bottom, you can opt for .bottom alignment.

HStack(alignment: .bottom) {
  Text("Hello")
  Text("SwiftUI")
}

Alignment in SwiftUI’s HStack offers developers a powerful tool for customizing their app’s user interface. Whether it’s top, center, bottom, or a custom alignment, you can perfectly position elements in an HStack to suit your needs.