Image SwiftUI 和 WidgetKit 上的叠加文本答案

【问题标题】：Overlay text on Image SwiftUI and WidgetKitImage SwiftUI 和 WidgetKit 上的叠加文本
【发布时间】：2020-12-23 12:54:05
【问题描述】：

我目前正在为我的新 iOS 14 应用程序创建一个小部件，当我尝试在我的图像上添加和覆盖文本时遇到了一个奇怪的问题。覆盖在空白 SwiftUI 项目上正常工作，但在小部件上不起作用。

您可以在下面找到我正在使用的代码。 KFImage 来自 KingFisherSwiftUI，但如果您想对其进行测试，您可以从 Asset 或 System 中添加静态 Image。

谢谢！

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

[编辑]

在代码结果下方。看起来图像在文本的顶部，即使它应该在叠加层中。

【问题讨论】：

您是否尝试删除该硬编码帧？
是的，什么都没有……
适用于 Xcode 12b5 / iOS 14 和 Image（而不是 KFImage）。
你在 WidgetKit 上测试过吗？ @Asperi
当然，在所有小部件系列上

标签： swift swiftui widgetkit

【解决方案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)
    }
}

【讨论】：