How do I extend the background of child views to their parent without using GeometryReader and without affecting the natural height in SwiftUI

Question

As you can see in the image below, I want the left (star) and right (sun) views’ backgrounds to fill their parent (HStack) without using GeometryReader or altering the HStack’s natural height.

struct FillParentTest: View {
    
    var body: some View {
        HStack(spacing: .zero) {
            Image(systemName: "star")
                .font(.title3)
                .padding()
                .background(.blue.opacity(0.5))
            
            Image(systemName: "moon")
                .resizable()
                .frame(width: 80, height: 80)
                .padding()
                .frame(maxWidth: .infinity)

            
            Image(systemName: "sun.min")
                .font(.title3)
                .padding()
                .background(.pink.opacity(0.5))
        }
        .frame(maxWidth: .infinity)
        .background(.yellow.opacity(0.5))
        .clipShape(.capsule)
        .padding(.horizontal)
    }
}

Just to be clear, you want the yellow color in the screenshot to be all covered by the blue and pink colors, each occupying half of the capsule? A screenshot of the desired result would be very helpful. — Sweeper
– Sweeper, Commented Nov 17 at 14:04

Mojtaba Hosseini · Accepted Answer · 2025-11-17 14:45:21Z

2

You can let children grow with maxHeight and push back the container using .fixedSize or just limit it with a simple height:

HStack(spacing: .zero) {
    Image(systemName: "star")
        .font(.title3)
        .padding()
        .frame(maxHeight: .infinity) // 👈 Here
        .background(.blue.opacity(0.5))

    Image(systemName: "moon")
        .resizable()
        .frame(width: 80, height: 80)
        .padding()
        .frame(maxWidth: .infinity)

    Image(systemName: "sun.min")
        .font(.title3)
        .padding()
        .frame(maxHeight: .infinity) // 👈 Here
        .background(.pink.opacity(0.5))
}
.fixedSize(horizontal: false, vertical: true) // 👈 And Here
.frame(maxWidth: .infinity)
.background(.yellow.opacity(0.5))
.clipShape(.capsule)
.padding(.horizontal)

Demo

answered Nov 17 at 14:45

Mojtaba Hosseini

124k45 gold badges342 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benzy Neez · Accepted Answer · 2025-11-17 15:37:34Z

-1

You could consider moving the images on the left and the right to an overlay.

An overlay automatically adopts the frame of the view it is applied to. So if you apply maxHeight: .infinity to the images, their height is increased to the height of the overlay, which is the height of the underlying view.

var body: some View {
    Image(systemName: "moon")
        .resizable()
        .frame(width: 80, height: 80)
        .padding()
        .frame(maxWidth: .infinity)
        .background(.yellow.opacity(0.5))
        .overlay {
            HStack {
                Image(systemName: "star")
                    .font(.title3)
                    .padding()
                    .frame(maxHeight: .infinity)
                    .background(.blue.opacity(0.5))
                Spacer()
                Image(systemName: "sun.min")
                    .font(.title3)
                    .padding()
                    .frame(maxHeight: .infinity)
                    .background(.pink.opacity(0.5))
            }
        }
        .clipShape(.capsule)
        .padding(.horizontal)
}

With this approach, the image forming the base view (the moon) is guaranteed to be exactly in the middle of the view, it does not matter if the two side images have different widths (which in fact they do).

Screenshot

edited Nov 17 at 15:37

answered Nov 17 at 15:21

Benzy Neez

29.4k3 gold badges22 silver badges63 bronze badges

1 Comment

Benzy Neez Nov 18 at 6:41

Ps. See this comment for some background to the downvote.

Collectives™ on Stack Overflow

How do I extend the background of child views to their parent without using GeometryReader and without affecting the natural height in SwiftUI

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related