[SwiftUI] Stack을 사용해 Layout 그리기

Stack

UIKit에서는 AutoLayout을 사용하여 layout을 구성했는데, SwiftUI에서는 Stack을 사용한다고 합니다.
HStack, VStack, ZStack을 사용하며 생김새는 다음과 같습니다.

UIKit의 StackView와 비슷한 것 같네요.
Spacer와 Divider를 사용하면 유연하고 복잡한 레이아웃을 만들 수 있다고 합니다.

Stack Initializer

• alignment: 서브뷰를 정렬 (default: .center)
• spacing: 서브뷰의 간격 (default: nil)
• content: 구현부

spacing은 HStack과 VStack에만 존재합니다.

Spacer

그렇다면 Spacer란 뭘까요?
스택에 포함된 경우, 스택 레이아웃의 주축을 따라 확장되며
스택에 포함되지 않은 경우 두 축을 따라 확장되는 유연한 공간이라고 합니다.

Spacer 없이 다음과 같이 작성해보았습니다.

이 체크마크 이미지를 넣기 전에 Spacer을 넣으면 어떻게 될까요?

이미지 앞에 Spacer를 추가하니 이미지와 텍스트를 스택의 오른쪽으로 푸시합니다.
이전 boarder와 비교하면 Spacer가 얼만큼 들어갔는지 보이실 것입니다.

그렇다면 이미지와 텍스트 중간에 Spacer를 추가해보도록 하겠습니다.

다음과 같이 이미지와 텍스트 사이에 Spacer를 추가하니 HSatck의 왼쪽과 오륵쪽으로 이미지와 텍스트가 푸시되네요.

Spacer에는 minLength라는 이니셜라이즈가 존재합니다.
옵셔널 값이고, 작성하지 않으면 default로 간격이 사용됩니다.
이 minLength는 이 Spacer의 최소 길이를 설정해 줄 수 있습니다.

즉, minLength가 250이라면 이 spacer는 250보다는 작아질 수 없습니다.

다음과 같은 경우 spacer의 크기가 얼마인지는 모릅니다.

하지만 minLenght를 250으로 설정했다면, spacer의 크기는 최소 250일 것입니다.

다양한 Layout을 구현하려면, spacer의 개념은 꼭 알아두어야 할 것 같네요.

Divider

Divider는 단순히 구분선을 지어주기 위해 사용됩니다.
또한 modifier를 사용해 속성 변경이 가능합니다.

마무리

SwfitUI에서 Layout을 적용하는 방법에 대해 공부했는데 UIKit의 StackView랑 유사한 부분도 많은 것 같습니다.
여러번 사용해보면.. 금방 익숙해지지 않을까 싶은데 아직까지는 AutoLayout이 더 편한 것 같습니다.

참고

https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views

https://developer.apple.com/documentation/swiftui/spacer

https://developer.apple.com/documentation/swiftui/hstack

https://developer.apple.com/documentation/swiftui/zstack

https://developer.apple.com/documentation/swiftui/vstack