zIndex(_:)

안녕하세요.

 

오늘은 SwiftUI의 zIndex(_:) 수식어에 대해 알아보려고 해요.

 

---

정의 먼저 살펴보면,

 

Controls the display order of overlapping views.
Use zIndex(_:) when you want to control the front-to-back ordering of views.

 

 

곂친(overlapping) 뷰의 표시 순서를 조절하는 것.

뷰의 앞뒤 순서를 제어할 때 zIndex(_:)를 사용한다.

 

 

쉽게 말해서 다른 뷰에 의해 가려져 있는 특정 뷰를 위로 올릴 때 사용하는 수식어라 볼 수 있습니다.

 

 

Parameter로는 value를 입력받습니다. (value는 어떤 뷰를 위로 올릴지에 대한 우선순위(?) 같은 개념이라고 보면 될 것 같아요.)

 

value의 기본값은 0이고, 값이 클수록 뷰를 위로 올립니다.

 

 

네... 이게 다입니다..ㅋㅋㅋ

(이렇게 간단하지만... 그동안 몰랐다는...;;;)

 

 

간단한 예시를 만들어볼게요.

 

두 개의 사각형을 곂치게 그려봤어요.

 

 

 

zIndex 수식어를 사용하면 노란색 사각형을 빨간색 사각형 위로 올릴 수 있습니다.

 

 

빨간색 사각형은 zIndex 수식어를 따로 사용하지는 않았지만, default 값이 0이기 때문에 value = 1인 노란색 사각형이 빨간색 사각형보다 위로 올라오게 되는 것이에요.

 

 

만약 zIndex 수식어로 value을 동일하게 설정했다면, 우선순위(?)가 서로 같기 때문에 코드 상에서 나중에 선언한 뷰가 위로 올라오게 됩니다^^

 

 

 

# 참고

- https://developer.apple.com/documentation/swiftui/view/zindex(_:) 

zIndex(_:) | Apple Developer Documentation

 

 

---

이번 글은 여기서 마무리.