[SwiftUI] onTapGesture에서 특정 부분에서 탭이 작동하지 않는 것

 

일반적인 Text나 Image나 컴포넌트에 탭 제스처를 추가해서, 사용자가 탭 했을때 액션을 정의할 수 있습니다.

 

제가 구현하면서 겪었던, 가장 흔히 사용할 수 있는 예시로 바로

사용자가 텍스트를 입력하기위해 Keyboard가 켜지고, 빈 화면을 터치시 키보드가 닫게하는 상황을 들 수 있을 것 같은데요.

 

VStack {
	// View Code
}
.onTapGesture {
    print("키보드를 닫습니다.")
}

저는 분명 이렇게 가장 크게 감싸고 있는 VStack에 탭 제스처를 넣었습니다.

이러면 화면의 빈부분을 터치하면 해당 print문이 나와야하지않습니까 ? 

 

근데 특정 부분에서는 아예 작동을 하지 않는거에요 ? 

그래서,, Stack같은게 겹쳐서 작동이 안되는것인가 ? 예상하고 찾아봤는데 그 문제는 아니었습니다 ! 

 

🚨 문제는 VStack안에 Image나 Text사이에 Spacer()도 넣고 그런다면, Spacer() 영역을 탭했을때는 원하는 탭 제스쳐 액션이 안될때가 있다는 것이었습니다.

 

✅ 이럴때 해결책으로는, contentShape()를 이용해서 탭 영역을 잡으면 가능하게 됩니다 ! 아래 코드와 같이 contentShape() 모디파이어를 통해 Stack 전체를 탭 가능 영역으로 만드는것이죠 ~! 

VStack {
    Text("Tap Tap")
    Spacer()
    Image(systemName: "chevron.left")
}
.contentShape(Rectangle())
.onTapGesture {
    print("키보드 닫기")
}