[SwiftUI] ZStack vs overlay modifier

ZStack 은 자신의 children를 z축으로 overlay하는 View이고 

overlay 는 현재 뷰에 secondary view를 overlay하는 modifier 입니다. 

(overlay를 중첩으로 번역할 수 있을 것 같습니다)

 

 

애플문서에 있는 overlay 예제의 결과를

 

 

zstack으로도 똑같이 나타낼 수 있습니다. 

 

 

이렇게 보면 똑같아보이지만 

사실 두 개는 차이점이 있습니다.

 

ZStack의 자식뷰들은 서로에 대해 independent 합니다. 

그리고 ZStack에 frame을 따로 주지 않은 이상 가장 큰 자식뷰를 기준으로 ZStack의 fit이 결정됩니다.

 

반면 overlay의 경우

overlay되는 view는 parent view에 종속됩니다.

항상 overlaid view는 parent view의 위에 위치하고 

parent view의 좌표 공간(coordinate space)에 있습니다

 

예제로 살펴보겠습니다.

 

[1] zIndex

 

폴더 이미지를 하트보다 더 위로 위치시키고 싶어서

image의 zIndex를 2로 주었습니다. 

(zindex 는 기본 값이 0이고 클 수록 더 front에 위치됩니다)

 

ZStack의 경우 예상대로 동작하지만

overlay의 경우 항상 overlaid view가 parent view위에 있는 것을 볼 수 있습니다. 

 

 

[2] fit

 

하트의 크기를 키워보겠습니다.

 

 

overlay는 parent view를 기준으로 fit이 잡히지만 

ZStack은 가장 큰 뷰를 기준으로 fit이 잡히는 것을 볼 수 있습니다. 

 

clipped() 해보면 이렇게 됩니다. 

 

 

alignment를 leading으로 바꿔보면 

더 차이를 명확히 알 수 있습니다. 

 

 

 

 

[ Reference ]

 

stackoverflow.com/questions/63446213/difference-between-a-zstack-or-using-overlay

Difference between a ZStack or using .overlay()