Overlay text on Image SwiftUI and WidgetKit

Question

I'm currently creating a widget for my new iOS 14 app and I encountered a weird problem when I'm trying to add and Overlay with Text on top of my Image. The overlay is correctly working on a blank SwiftUI project but it's not working on the Widget.

Below you can find the code that I'm using. KFImage is from KingFisherSwiftUI, but if you want to test it, you can just add a static Image from the Asset or from the System.

Thanks!

  struct NewItems: View {
    var body: some View {
        KFImage(URL(string: "https://img.freepik.com/free-vector/triangular-dark-polygonal-background_23-2148261453.jpg?size=626&ext=jpg")! )
            .resizable()
            //.frame(width: 200, height: 200, alignment: .center)
            .overlay(TextView(), alignment: .bottomTrailing)
            .cornerRadius(20)
    }
}

struct TextView: View {
    var body: some View {
        ZStack {
            Text("Hello World Beautiful wallpaper")
                .foregroundColor(.white)
                .shadow(color: .black, radius: 1, x: 1.0, y: 1.0)
                .padding(6)
                .opacity(0.8)
        }
        .background(Color.black)
        .cornerRadius(10)
        .padding(3)
    }
}

[EDIT]

Below the result of the code. Looks like the image is on top of the text, even though it supposed to be in overlay.

Works fine with Xcode 12b5 / iOS 14 and Image (instead of KFImage). — Asperi, Sep 04 '20 at 10:00
So might be an issue of KingFisher? [EDIT] I tried also with Image instead of KingFisher and I still have the same issue. Looks like the text is behind the image. — Pietro Messineo, Sep 04 '20 at 10:04

score 2 · Accepted Answer · answered Sep 04 '20 at 10:44

In the end after multiple tries I managed to find an alternative solution.

  struct TextView: View {
    let entry: HelloWorldEntry
    var body: some View {
        ZStack {
            Text("SOME TEXT")
                .foregroundColor(.white)
                .shadow(color: .black, radius: 1, x: 1.0, y: 1.0)
                .padding(6)
                .opacity(0.8)
        }
        .background(Color.black)
        .cornerRadius(10)
        .padding(6)
    }
}

struct NewTest: View {
    let entry: HelloWorldEntry
    var body: some View {
        VStack {}
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            KFImage(URL(string: "https://example.com/image.png")!)
                .resizable()
                .scaledToFill()
        )
        .overlay(TextView(entry: entry), alignment: .bottomTrailing)
    }
}

Overlay text on Image SwiftUI and WidgetKit

1 Answers1