Наложение текста на Image SwiftUI и WidgetKit

В настоящее время я создаю виджет для своего нового приложения iOS 14, и я столкнулся со странной проблемой, когда пытаюсь добавить и наложить текст поверх моего изображения. Наложение правильно работает с пустым проектом SwiftUI, но не работает с виджетом.

Ниже вы можете найти код, который я использую. KFImage от KingFisherSwiftUI, но если вы хотите его протестировать, вы можете просто добавить статическое изображение из актива или из системы.

Спасибо!

  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)
    }
}

[РЕДАКТИРОВАТЬ]

Ниже результат кода. Похоже, что изображение находится поверх текста, даже если оно должно быть наложено.

1 ответ

В конце концов, после нескольких попыток мне удалось найти альтернативное решение.

  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)
    }
}
Другие вопросы по тегам