Clipped Image 在框架外调用 TapAction

Question

我对图像上的 tapAction 有疑问。 TapAction 闭包在不应发生的裁剪区域上被调用。我该怎么办？

Image(uiImage: image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(height: 200, alignment: .center)
    .presentation(tapped ? Modal(Image(uiImage: image)) : nil)
    .clipped()
    .cornerRadius(10)
    .border(Color.black, width: 2, cornerRadius: 10)
    .tapAction {
        self.tapped.toggle()
    }

这是结果：

Answer 1

更新

我更新了我的答案。这是正确的做法。有一个名为 contentShape() 的修饰符，您可以使用它来定义命中测试区域：

import SwiftUI

struct ContentView: View {
    @State private var tapped = false

    var body: some View {
        Image(systemName: "circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: 200, alignment: .center)
            .presentation(tapped ? Modal(Image(systemName: "photo")) : nil)
            .clipped()
            .cornerRadius(10)
            .border(Color.black, width: 2, cornerRadius: 10)
            .contentShape(TapShape())
            .tapAction {
                self.tapped.toggle()
            }
    }

    struct TapShape : Shape {
        func path(in rect: CGRect) -> Path {
            return Path(CGRect(x: 0, y: 0, width: rect.width, height: 200))
        }
    }
}

Clipped Image 在框架外调用 TapAction

Clipped Image calls TapAction outside frame

image

swift

swiftui