Align heights of HStack members

Question

I want to align the heights of two HStack members. The expected outcome would be that the image has the same size as the text. The current outcome is that the image has more height than the text. This is my current setup:

HStack {
  Text("Sample")
    .font(.largeTitle)
    .padding()
    .background(
      RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)
    )

  Spacer()
      
  Image(systemName: "checkmark.seal.fill")
    .resizable()
    .scaledToFit()
    .padding()
    .background(
      RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)
    )
}

What I've tried:

.fixedSize() -> I tried to tack this modifier onto the Image but the result was that the Image's height got smaller than the text's. Probably because the SFSymbol's intrinsic height is smaller than the .largeTitle intrinsic height.
AlignmentGuide -> I tried to create a custom alignment guide where I initially thought I could say "align bottom of Image and Text and align top of Image and Text" and therefore have the same height. But it seemed like you can only apply a single alignment guide per stack view.
GeometryReader -> I tried to wrap the HStack in a GeometryReader in which I tacked the .frame(height: proxy.frame.height) view modifier on the Text and Image. This also did not help because it somehow just made some white space around the views.

How it is:

How I want it:

Does this answer your question https://stackoverflow.com/a/62451599/12299030? — Asperi, Sep 24 '21 at 15:55

score 3 · Accepted Answer · answered Sep 24 '21 at 16:21

Wrap your Image in a Text. Since your image is from SF Symbols, SwiftUI will scale it to match the dynamic type size. (I'm not sure how it will scale other images.)

VStack {
    let background = RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)

    ForEach(Font.TextStyle.allCases, id: \.self) { style in
        HStack {
            Text("\(style)" as String)
                .padding()
                .background(background)

            Spacer()

            Text(Image(systemName: "checkmark.seal.fill"))
                .padding()
                .background(background)
        }
        .font(.system(style))
    }
}

Your code in part of `Text(Image(systemName: "checkmark.seal.fill"))` does not need `Text` because the font would automatically get applied on Image where they are using systemName! — ios coder, Sep 25 '21 at 00:14

Visal Rajapakse · Answer 2 · 2021-09-24T16:11:39.900

You can get the size of the Image small by adding a .frame() modifier to your HStack. See the code below,

HStack {
    // Some Content
}
.frame(height: 60) // Interchangeable with frame(maxHeight: 60)

The Result:

For your exact example, I found 60 to be the sweet spot. But if you wanted a more dynamic solution, I'd make a few changes to your code. See the code below.

HStack {
    Text("Sample")
        .font(.largeTitle)
        .frame(maxHeight: .infinity) // force the text to take whatever height given to the Parent View, which is the HStack
        .padding(.horizontal) // Add padding to the Text to the horizontal axis
        .background(
            RoundedRectangle(cornerRadius: 10)
                .foregroundColor(.red)
        )

    Spacer()

    Image(systemName: "checkmark.seal.fill")
        .resizable()
        .scaledToFit()
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 10)
                .foregroundColor(.red)
        )
}
.background(Color.gray)
.frame(height: 100) // Change this value and the embedded Views will fit dynamically

The output will work as shown in the GIF below,

score 0 · Answer 3 · answered Sep 25 '21 at 00:19

Here is an upgrade version of rob answer which support Assets Image plus system Image! Almost any Image! Like this:

struct ContentView: View {
    
    var body: some View {
        
        VStack {
            
            ForEach(Font.TextStyle.allCases, id: \.self) { style in
                
                HStack {
                    
                    Text(String(describing: style))
                        .padding()
                        .background(Color.pink.opacity(0.5).cornerRadius(10.0))
                    
                    Spacer()
                    
                }
                .font(.system(style))
                .background(
                    
                    Image("swiftPunk")
                        .resizable()
                        .scaledToFit()
                        .padding()
                        .background(Color.yellow.cornerRadius(10.0))
                    
                    , alignment: .trailing)
                
            }
            
        }
        
    }
    
}

Result:

A potential problem with this solution is that if the text is long enough it would overlap with the image instead of the text getting the "..." at the end. — ph1psG, Sep 25 '21 at 10:54

Align heights of HStack members

3 Answers3

Result: