resizable on an Image affects also Text behaviour

Question

Created Jul ’20

Replies 1

Boosts 1

Participants 2

I am working on SwiftUI to make a widget and I can't figure out if I'm doing something wrong or there's a bug in SwiftUI.

I have an Image that I use as a background and at the top there's a text. If I apply resizable() to the Image it also affects the behaviour of the text.

The following code

Code Block var body: some View {
        ZStack {
            VStack {
                Image(affirmation.customImageName ?? "c_0")
                    .resizable()
                    .scaledToFill()
                    .clipped()
            }
            
            HStack {
                Text(affirmation.title)
                    .font(.body)
                    .multilineTextAlignment(.leading)
                    .lineLimit(nil)
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
        }
    }

Creates a full background image that takes the whole view, but the Text is out of bounds as well.

And the following code (without resizable()):

Code Block var body: some View {
        ZStack {
            VStack {
                Image(affirmation.customImageName ?? "c_0")
                    .scaledToFill()
                    .clipped()
            }
            
            HStack {
                Text(affirmation.title)
                    .font(.body)
                    .multilineTextAlignment(.leading)
                    .lineLimit(nil)
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
        }
    }

Creates the Image without filling the whole space but the Text is perfectly displayed.

(I would have attached screenshots but it doesn't seem possible)

Boost

Answer 1

artium OP

2w

For the benefit of those who search for a solution for a similar problem and find this post through search.

As I understand, Image takes all available space, however in this case the image is wider than the screen and has .resizable and scaleToFill modifiers which will make it to take more space than offered by the container. The container will resize accordingly, extending beyond the boundaries of the visible screen, and then offer more space to the other children including the text.

To solve this, use .background modifier instead of a ZStack. I think adding .containerRelativeFrame([.vertical, .horizontal]) to the image will also work, though I suspect not as well if you want the background image to ignore safe areas.

0