How to control the tappable area of a view using contentShape()

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-control-the-tappable-area-of-a-view-using-contentshape]

 

How to control the tappable area of a view using contentShape()

 

Text나 Image와 같은 기본 SwiftUI 뷰에 탭 제스쳐를 추가하는 경우에, 뷰는 탭이 가능(tappable)해집니다. VStack 또는 HStack과 같은, 컨테이너 SwiftUI 뷰에 탭 제스쳐를 추가하는 경우에, SwiftUI는 컨테이너의 내부에 있는 일부분만 제스쳐를 추가합니다 - 스택의 큰 부분은 탭이 가능하지 않게(untappable)됩니다.

 

이게 원하는 것이라면 기본 동작은 좋습니다. 하지만, hit tests의 모양을 변경하고자 하는 경우에(탭에 반응하는 영역) 원하는 모양과 함께 contentShape() modifier를 사용해야 합니다. 

 

예를들어, 다음 코드는 VStack이 이미지, 공백(spacer), 텍스트를 포함하고 이미지와 텍스트 대신에 탭 가능한 전체 스택을 만들기 위해 contentShape() modifier를 사용합니다.

VStack {
    Image("enterprise").resizable().frame(width: 50, height: 50)
    Spacer().frame(height: 50)
    Text("USS Enterprise")
}
.contentShape(Rectangle())
.onTapGesture {
    print("Show details for Enterprise")
}