[SwiftUI] ZStack의 중앙 정렬 거동

ZStack 의 거동에 대해 간단하게 조사해 보았습니다.

하고 싶었던 일

지정의 영역내의 중심에, 화상등의 고정 사이즈의 것을 중앙 맞춤으로 표시할 때, 처음은 HStack 와 VStack 와 Spacer 를 사용해, 중앙 맞춤으로 할 수 있는 것을 생각했습니다.

VStack {
  Spacer()
  HStack {
    Spacer()
    Color.gray.frame(width: 100, height: 100)
    Spacer()
  }.frame(width: 320)
  Spacer()
}.frame(height: 480)

이것도 중앙 정렬이 가능했지만 레이아웃이 복잡합니다.
보다 간단한 방법이 없을까 생각하고 ZStack 로 중앙 맞출 수 없는지 조사했습니다.

ZStack에서 중앙 정렬

ZStack을 사용하는 방법은 놀랍고 간단했습니다.

ZStack {
  Color.gray.frame(width: 100, height: 100)
}
.frame(width: 320, height: 300)

이 코드는 다음과 같습니다.

ZStack의 alignment

ZStack 그럼, 인수로서 alignment를 지정할 수 있었습니다만, 생각하고 있었던 것과 달랐습니다.

ZStack(alignment: .leading) {
  Color.gray.frame(width: 100, height: 100)
}
.frame(width: 320, height: 300)

그렇다면 왼쪽 정렬이 될 것이라고 생각했지만 그렇지 않았습니다.

이 alignment 가 어떻게 효과가 오는지 조사한 결과, 이하의 거동이 되어 있었습니다.

ZStack(alignment: .top) {
  Color.gray.frame(width: 100, height: 100)
  Color.black.frame(width: 100, height: 10)            
}
.frame(width: 320, height: 300)

이와 같이 지정하면,

2개의 요소가 top 로 갖추어진 뒤, ZStack의 중앙 정렬이 되어 있었습니다.

참고

htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 슈 f 타이 / zs ck
h tps:// 퀵했다. 소 m/씨·있어 MS/0C41d20아 2cb7b0748875
h tps : //에서. 코 m / 마리코 오타 / 응 / 3d0054 0c87