How do I setup ZStack with Image filled to the widget bounds?

Question

My code looks like this:

    ZStack {
        
        NetworkImage(url: url)
        VStack(alignment: .trailing, spacing: 5) {
            Spacer()
            Text("this is my quite long title here")
                    .font(.title)
                    .bold()
                    .foregroundColor(.white)
                    .lineLimit(nil)
                    .multilineTextAlignment(.trailing)
            Text("subtitle this is my long long subtitle to create multiply lines")
                    .font(.caption)
                    .foregroundColor(.white)
                    .lineLimit(nil)
                    .multilineTextAlignment(.trailing)
        }
        .padding()
    }

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .resizable()
                .scaledToFill()
        }
    }
}

But this looks bad and it is not what I need t achieve.

I need to make it aligned to the right and to the bottom with some padding from the edges. That is all. How can I do this?

After update from @user1046037 answer it looks like:

user1046037 · Accepted Answer · 2021-01-17T05:47:17.673

Code Changes:

1. ZStack Alignment

ZStack(alignment: Alignment(horizontal: .trailing, vertical: .bottom)) {

2. Crop in the center

In NetworkImage, center crop (code provided) in the image extension.

Thanks to @vacawama How to center crop an image in SwiftUI

Complete Code:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .trailing, vertical: .bottom)) {
            
            NetworkImage(url: URL(string: "https://unsplash.com/photos/KZv3Rb_OIXI/download?force=true"))
            VStack(alignment: .trailing, spacing: 5) {
                Spacer()
                Text("this is my quite long title here")
                        .font(.title)
                        .bold()
                        .foregroundColor(.white)
                        .lineLimit(nil)
                        .multilineTextAlignment(.trailing)
                Text("subtitle this is my long long subtitle to create multiply lines")
                        .font(.caption)
                        .foregroundColor(.white)
                        .lineLimit(nil)
                        .multilineTextAlignment(.trailing)
            }
            .padding()
        }
    }
}

//Center Crop
extension Image {
    func centerCropped() -> some View {
        GeometryReader { geo in
            self
            .resizable()
            .scaledToFill()
            .frame(width: geo.size.width, height: geo.size.height)
            .clipped()
        }
    }
}

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .centerCropped()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

No, it doesnt work... Still the same. It looks like the image view moves trailing out of widget bounds. — Bartłomiej Semańczyk, Jan 12 '21 at 21:33
In the NetworkImage, could you use `.scaledToFit()` instead of `.scaledToFill()` along with the above mentioned change? — user1046037, Jan 12 '21 at 21:35
Updated my answer, just to ensure we are on the same page, I am previewing not on the widget, but this was with a landscape picture — user1046037, Jan 12 '21 at 21:42
I updated the question, but this is not what I need, because an image doesnt fill the whole space... — Bartłomiej Semańczyk, Jan 12 '21 at 21:42
See the updated by cropping in the center, thanks to https://stackoverflow.com/questions/63651077/how-to-center-crop-an-image-in-swiftui — user1046037, Jan 12 '21 at 21:53

Adam · Answer 2 · 2021-01-16T18:55:19.790

The ZStack with the Image in it is the problem. The ZStack isn’t cropping the Image, it’s actually growing to fit the image and extending outside the bounds of the widget. The Text is inside that same ZStack, so it too grows to fill the available space.

Maybe this helps visualize the issue (black round-rect is the widget frame):

Solution

Put the image in the VStack's .background instead:

var body: some View {

    VStack(alignment: .trailing, spacing: 5) {
        Spacer()
        Text("this is my quite long title here")
            .font(.title)
            .bold()
            .foregroundColor(.white)
            .lineLimit(nil)
            .multilineTextAlignment(.trailing)
        Text("subtitle this is my long long subtitle to create multiply lines")
            .font(.caption)
            .foregroundColor(.white)
            .lineLimit(nil)
            .multilineTextAlignment(.trailing)
    }
    .padding()
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(NetworkImage(url: url))

}

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .resizable()
                .scaledToFill()
        }
    }
}

Thank you for your answer, but the image fits to the view. Doesnt fill a whole space... Is there anything to set contentMode like `.aspectFill` instead of `.aspectFit` — Bartłomiej Semańczyk, Jan 16 '21 at 18:11
Are you using the `NetworkImage` from your original post, with the `scaledToFill`? (I updated my answer to clarify what NetworkImage is) — Adam, Jan 16 '21 at 18:55