Unexpected behaviour when tapping on Image in SwiftUI - swiftui

Question

I have a series of images in a ForEach loop. Tapping an image will select it and with draw a red overlay. However when tapping on the the second image the third image gets selected. If I replace the images with simple shapes the code behaves as expected. Please see attached screen cast.
onTapGesture is set on an individual tile.
Here is the code:
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 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()
.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)"
}
}
Any Help will be appreciated.

Answer 1

You are not using ObservedObject the way it is meant to be used.
More info on how to use them can be found here: https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
Try this approach using an ObservedObject (TilesModel) to hold and update your tiles and
declaring a struct Tile to represent the object. Works well for me.
Note, your code does work if you use .scaledToFit() instead of .scaledToFill() in your TileView, or put .frame(height: 150 ) before .scaledToFill(). However just because it works does not mean it is right.
struct ContentView: View {
#StateObject var tilesModel = TilesModel() // <-- here
var body: some View {
TilesView(tilesModel: tilesModel) // <-- here
}
}
struct TilesView: View {
#ObservedObject var tilesModel: TilesModel // <-- here
var body: some View {
VStack{
ForEach($tilesModel.tiles) { $tile in
TileView(tile: $tile )
}
}
}
}
struct TileView: View {
#Binding var tile: Tile // <-- here
var body: some View {
Image(tile.imageName)
.resizable()
.frame( height: 150 ) // <-- here
.scaledToFill()
.overlay( tile.isSelected ? Color.red.opacity(0.5) : .clear )
.cornerRadius(10)
.padding( .horizontal )
.padding( .vertical, 5 )
.clipped()
.onTapGesture {
tile.isSelected.toggle()
}
}
}
class TilesModel: ObservableObject{
#Published var tiles = [Tile(counter: 1), Tile(counter: 2), Tile(counter: 3)]
}
struct Tile: Identifiable {
var id:UUID = UUID()
var isSelected: Bool = false
var imageName: String = ""
init(counter: Int) {
self.imageName = "img\(counter)"
}
}

Answer 2

This appears to be a system bug when using scaledToFill(). The tap gesture seems to be picking up the full image rect, including the area not drawn. Hence in my case, using a portrait orientated image will cause unexpected behaviours. As was suggested in the following post:
SwiftUI tap gesture selecting wrong item
...to work around this issue one needs to add a .contentShape modifier which determines the area to receive the tap gesture.
Simply adding .contentShape(Rectangle()) before .onTapGesture resolved the issue for me.(as suggested by: #workingdog support Ukraine)
struct TileView: View {
#Binding var tile:Tile
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 )
.contentShape( Rectangle())
.onTapGesture {
tile.isSelected.toggle()
}
}
}
Any other suggestions and improvements will be appreciated.