How to Set HStack Full Width in iOS SwiftUI

Creating intuitive layouts is a core part of app development, and SwiftUI gives developers a powerful tool for this: the HStack. This post aims to guide you through the process of making an HStack fill its parent view’s width.

What is HStack?

Before we dive into achieving full width, let’s understand HStack. An HStack in SwiftUI is a horizontal stack where you can place child views side by side. It’s a common component used in various user interface designs.

Expand HStack to Fill Width

Just like VStack, the .frame modifier is the magic wand to get your HStack to fill its parent’s width. Here’s how to do it.

Step 1: Create an HStack

Start by creating a basic HStack. For the purpose of this tutorial, let’s add a few Text views.

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

Step 2: Use .frame Modifier

To make the HStack fill its parent view’s width, you will need to use the .frame modifier and set the maxWidth parameter to .infinity.

HStack {
  Text("SwiftUI")
  Text("HStack")
}.frame(maxWidth: .infinity)

This tells SwiftUI to stretch the HStack as wide as it can go within its parent view, achieving full width.

HStack is a wonderful tool in SwiftUI, perfect for creating side-by-side views. To fill the parent view’s width, all you need to do is apply the .frame modifier with maxWidth: .infinity. This knowledge allows you to design more flexible and adaptable user interfaces.

Meta Description

Learn how to stretch HStack to fill its parent view’s width in SwiftUI. This guide will walk you through this fundamental SwiftUI layout concept.