Make equal height subviews in HStack in SwiftUI

In this tutorial, we will see how to make equal height subviews in HStack in SwiftUI.

When we use an HStack in SwiftUI to align different things side by side, normally it will adjust its height to match the tallest thing. But sometimes, we might want everything in the HStack to be the same height.

We can do this by using two special modifiers called .frame and .fixedSize.

First of all, within the Hstack I will create some subviews and see how they appear. I will set different backgrounds for each subview to see the actual height they occupied.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        // The HStack containing Text view and a VStack
        HStack {
            // Text view with the content "Hey, there" and background color blue
            Text("Hey, there")
                .background(.blue)
            
            // The VStack containing three Text views
            VStack {
                Text("Welcome")
                Text("to")
                Text("CodeSpeedy")
            }
            // Set the background color of the entire VStack to mint
            .background(.mint)
        }
        // Set the background color of the entire HStack to gray
        .background(.gray)
        // Set the font of all the Text views to largeTitle
        .font(.largeTitle)
    }
}

Output:

As you can see in the above output, each subview has a different height. Now, I will adjust the height of each subview to be the same.

Make equal height subviews

Normally, each view in the HStack adjusts its height to fit its content. But if we want them all to be the same height, we can tell each view to take up as much space as it can vertically by setting the maxHeight to infinity within the frame() modifier.

Syntext:

.frame(maxHeight: .infinity)

After making sure each view wants to be as tall as possible, we need to lock in this behavior for the entire HStack. We can do this by using .fixedSize() modifier on the HStack.

Syntex:

.fixedSize(horizontal: false, vertical: true)

The above code will keep the height of a view fixed matching the tallest element inside it (HStack), but the width can be changed based on the content.

Now, we can make all the views in our HStack the same height by combining these two methods.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hey, there")
                // Set the maximum height of the text to be as much as possible
                .frame(maxHeight: .infinity)
                .background(.blue)
            
            VStack {
                Text("Welcome")
                Text("to")
                Text("CodeSpeedy")
            }
            // Set the maximum height of the VStack to be as much as possible
            .frame(maxHeight: .infinity)
            .background(.mint)
        }
        // Fix the size of the entire HStack to allow dynamic content to expand vertically
        .fixedSize(horizontal: false, vertical: true)
        .background(.gray)
        .font(.largeTitle)
    }
}

In the above program, the height of the HStack will align with the height of its tallest child, which is a VStack in this case.

The Text("Hey, there") within the VStack will also take the maximum available height.

Output: