[SwiftUI] ImageResize 후 onTapGesture 적용시 터치영역 버그

ForEach 를 사용하여 카드컴포넌트를 구성한 후, 각 컴퍼넌트에 onTapGesture를 적용했더니, 터치 영역에 문제가 생겼다.

인덱스 0 번의 컴퍼넌트 중간 아래부분 부터는 인덱스 1번 영역으로 터치가 인식되는 것이었다.

resizable을 적용한 후, onTapGesture를 적용하였지만, resizable이 먹히지 않은 것 같다는 생각에 검색을 해봤다.

 

기존 코드 예시

var body: som View {
		ForEach(Array(myArray.enumerated()), id: \.offset) { index, item in
			cardView(item: item, index: index))
		}
}

@ViewBuilder
func cardView(item: itemType, index: Int) -> some View {
	ZStack {
			Image("myImage")
				.resizable()
				.aspectRatio(contentMode: .fill)
				.frame(height: 120, alignment: .center)
				.cornerRadius(10)
				.clipped()
			Text("title")
	}
	.onTapGesture(perform: {
			print("index: \(index)")
	}
}

...

인터넷을 검색해 보니 contentShape을 적용해 주면 잘 작동한다고 한다.

 

바뀌 코드 예시

var body: som View {
		ForEach(Array(myArray.enumerated()), id: \.offset) { index, item in
			cardView(item: item, index: index))
		}
}

@ViewBuilder
func cardView(item: itemType, index: Int) -> some View {
		ZStack {
				Image("myImage")
					.resizable()
					.aspectRatio(contentMode: .fill)
					.frame(height: 120, alignment: .center)
					.cornerRadius(10)
					.clipped()
				Text("title")
		}
		.frame(hegith: 120)
		.contentShape(RoundedRectangle(cornerRadius: 10))
		.onTapGesture(perform: {
				print("index: \(index)")
		}
}

...

아마 resizable()과 aspectRatio, clipped() 는 shape의 hit testing을 수정해주지는 못하는 문제가 있는것 같다. 단순히 view를 잘라줄 뿐……

 

 

참조 : https://developer.apple.com/forums/thread/123717