SwiftUI中ForEach内视图OnTapGesture返回错误ID问题排查

我使用ForEach循环创建视图并绑定点击手势，代码如下：

// objects = [MyObject]
VStack {
    ForEach(objects, id: \.id) { obj in
        MyView(imageURL: obj.imageURL) // 每个对象对应的URL显示正确
            .onTapGesture {
                didTap(obj.objectId) // 此处返回的objectId错误，总是偏移2个索引
            }
    }
}

其中MyObject是遵循Identifiable协议的结构体，id由唯一属性生成：

struct MyObject: Codable, Identifiable {
    var id: String {
        get { return uniquePropertyString }
    }

    var imageURL: String
    var objectId: String
}

点击时返回的objectId总是数组中往后偏移2个索引的对象ID，原本以为使用唯一且不变的id属性能避免视图复用导致的问题，但问题依旧存在。

问题根源 #

最终排查发现：视图存在超出边界的不可见点击区域，点击某个视图时实际触发了另一视图的手势（点击区域重叠）。

具体原因是MyView内部包含的AsyncImage原图尺寸过大，虽然已通过裁剪适配视图范围显示，但原图的完整尺寸（隐藏状态）仍被识别为点击区域，超出了视图的可见边界，造成不同视图的点击区域重叠。

解决方法 #

为MyView中的AsyncImage添加.contentShape(Rectangle())修饰符，将点击区域限制在视图的可见边界内即可解决问题：

// 修改MyView内的AsyncImage实现
AsyncImage(url: URL(string: imageURL)) { image in
    image.resizable()
         .scaledToFit()
         .clipped()
} placeholder: {
    ProgressView()
}
.contentShape(Rectangle()) // 添加此行限制点击区域

内容的提问来源于stack exchange，提问作者Aggressor