SwiftUIのLazyVGridとImageとonTapGesture

https://qiita.com/tsuzuki817/items/cc9364089cee3a763084

上記のQiitaの記事で成功例として挙げられているコードに
onTapGesture()を追加し、処理として、
タップした画像が
pickedImages配列に含まれていなければ配列に追加
pickedImages配列に既に含まれていれば配列から削除
また、同時にボーダーの色も変更する仕様にしたのですが、
onTapGesture()の範囲がうまく制限出来ません。
clipped()したはずの部分にもタップが効いてしまう状態です。

scaledToFill()を外すと、タップ範囲はうまくいくが、アスペクト比がうまくいかない。
アスペクト比を維持したまま、タップ範囲を制限したいです。

Swift

LazyVGrid( columns: Array(repeating: .init(.flexible()), count: 3), alignment: .center, spacing: 4) { ForEach(images, id: \.self) { imageName in Color.black .aspectRatio(1, contentMode: .fill) .overlay( Image(imageName) .resizable() .scaledToFill() ) .clipped() .border(pickedImages.contains(where: { $0 == imageName }) ? Color.green : Color.black) .onTapGesture { if (pickedImages.contains(where: { $0 == imageName })) { pickedImages.removeAll(where : { $0 == imageName }) } else { pickedImages.append(imageName) } } }}

コメントを投稿

0 コメント