SwiftUI中点击Image异常：点击第二个图片选中第三个

问题现象 #

• 在ForEach循环展示图片列表时，点击某张图片触发选中状态（显示红色覆盖层），出现点击第二张图片却选中第三张的错位问题
• 将图片替换为简单图形（如Rectangle）时，代码运行正常
• 点击手势绑定在单个TileView组件上

问题原因 #

1. ObservableObject状态管理错误：TileView中使用@StateObject接收外部传入的TileClass实例，@StateObject仅适用于在当前View内部初始化ObservableObject对象，外部传入的实例应使用@ObservedObject，错误的属性包装器会导致视图状态更新混乱，引发选中错位。
2. 图片布局的点击区域偏移：scaledToFill()会让图片按比例填充frame，当图片原始尺寸比例与frame比例不符时，图片会超出frame范围，尽管clipped()裁剪了显示内容，但默认点击手势的响应区域是图片未裁剪前的原始布局范围，导致实际点击区域与可视区域不匹配。

修复方案 #

1. 修正状态管理属性包装器 #

将TileView中的@StateObject改为@ObservedObject，确保外部传入的ObservableObject状态变化能正确驱动视图更新。

2. 约束点击响应区域 #

添加contentShape(Rectangle())，强制将视图的点击响应区域设置为裁剪后的可视frame范围，消除点击区域偏移问题。

修改后的完整代码 #

struct ContentView: View {
    let tiles = [TileClass(counter: 1 ), TileClass(counter: 2 ), TileClass(counter: 3 )]
    var body: some View {
        TilesView(tiles: tiles )
    }
}

struct TileView: View {
    // 替换@StateObject为@ObservedObject
    @ObservedObject var tile: TileClass
    var body: some View {
        Image(tile.imageName)
            .resizable()
            .scaledToFill()
            .overlay(tile.isSelected ? Color.red.opacity(0.5) : .clear)
            .frame(height: 150)
            .cornerRadius(10)
            .padding(.horizontal)
            .padding(.vertical, 5)
            .clipped()
            // 约束点击响应区域为可视范围
            .contentShape(Rectangle())
            .onTapGesture {
                tile.isSelected.toggle()
            }
    }
}

struct TilesView: View {
    var tiles:[ TileClass ]
    var body: some View {
        VStack{
            ForEach( tiles ){ tile in
                TileView(tile: tile )
            }
        }
    }
}

class TileClass: Identifiable, Equatable, ObservableObject, Hashable{
    static func == (lhs: TileClass, rhs: TileClass) -> Bool {
        return lhs.id == rhs.id
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    var id:UUID = UUID()
    @Published var isSelected:Bool = false
    var imageName:String!
    
    init( counter:Int ) {
        imageName = "img\(counter)"
    }
}

额外验证 #

• 确保项目中存在名为img1、img2、img3的图片资源，避免因图片缺失导致的布局异常
• 若仍存在问题，可尝试将scaledToFill()替换为scaledToFit()，观察是否因图片填充方式导致的布局偏差

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