Clipped 实际上并没有剪辑 SwiftUI 中的图像

Question

我正在尝试剪切图像，正如我们看到的 UI 一样，它看起来不错，但实际上它不会剪切图像，从而导致其他 UI 元素无响应。

这是我正在使用的代码。

struct ImageContentView: View {
    var urls:[String] = [
        "https://lh3.googleusercontent.com/proxy/80im-IBfLODpLDj8d02uEpSVIhqdjen6H6CeFwgRBxeua-Dgw0R3WONFj1Gk8CwB_MufmC9rQ8qHjyWMejwFcJ1PA2s8AAu5WVsmJA=s0-d",
        "https://wallpaperaccess.com/full/530919.jpg"
    ] 
    var body: some View {
        ScrollView{
            VStack{
                Button(action: {
                    
                }, label: {
                    Text("Hello")
                })
                VStack(spacing: 20.0) {
                    ForEach(self.urls, id:\.self) { url in
                        WebImage(url: URL.init(string: url)!)
                            .resizable()
                            .aspectRatio(contentMode: ContentMode.fill)
                            .frame(height: UIScreen.main.bounds.size.width * 0.5) 
                            .clipped()
                            .cornerRadius(10.0)
                            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
                    }
                }.padding()
            }
        }
    }
}    

Answer 1

这是固定部分（使用 Xcode 12 / iOS 14 测试）

VStack(spacing: 20.0) {
    ForEach(self.urls, id:\.self) { url in
        WebImage(url: URL.init(string: url)!)
            .resizable()
            .aspectRatio(contentMode: ContentMode.fill)
            .frame(height: UIScreen.main.bounds.size.width * 0.5)
            .clipped()
            .cornerRadius(10.0)
            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
    }.contentShape(Rectangle())   // << here !!
}.padding()

注意：我不知道你的是什么，WebImage但Image也复制了本地图像，因此测试了修复。