在Image SwiftUI和WidgetKit上覆盖文字

编程问答 2022-08-12

问题描述

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

下面您可以找到我正在使用的代码。 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)
    }
}

[编辑]

在代码结果下面。图像看起来像在文字的顶部，即使它应该是重叠的。

enter image description here

enter image description here

解决方法

最后，经过多次尝试，我设法找到了替代解决方案。

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