SwiftUI - Stack

안녕하세요.

 

오늘은 SwiftUI에서 View들을 배치하는 데 사용되는 Stack에 관해서 알아보겠습니다.

---

SwiftUI는 세 종류의 Stack을 제공하고 있습니다.

 

수직으로 뷰들을 배치하는 VStack, 수평으로 뷰들을 배치하는 HStack, 그리고 Z축으로 뷰들을 배치하는 ZStack이 있습니다.

(LazyVStack과 LazyHStack은 나중에 다루도록 하겠습니다.)

 

UIKit에서 StackView를 다루어봤던 분들이라면 어떤 식으로 뷰들이 배치가 되는지 상상이 되실거라 생각합니다.

 

지금부터 하나씩 살펴보도록 하겠습니다.

 

1. VStack

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

Apple Developer Documentation

자식 뷰들을 수직으로 배치하는 뷰입니다.

 

struct ContentView: View {
    var body: some View {
        HStack{
            Text("One")
            Text("Two")
            Text("Three")
        }
    }
}

위와 같이 세 개의 Text를 선언하면 추가해보겠습니다.

세개의 Text가 수직으로 배치된 것을 확인할 수 있습니다.

 

2. HStack

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

Apple Developer Documentation

자식 뷰들을 수평으로 배치하는 뷰입니다.

 

struct ContentView: View {
    var body: some View {
        HStack{
            Text("One")
            Text("Two")
            Text("Three")
        }
    }
}

VStack을 HStack으로 바꾼 결과를 확인해보겠습니다.

 

위와 같이 수평하게 뷰들을 배치한 것을 확인할 수 있습니다.

 

3. ZStack

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

Apple Developer Documentation

자식 뷰들을 Z축으로 오버레이 하는 뷰입니다.

 

struct ContentView: View {
    var body: some View {
        ZStack{
            Text("One")
            Text("Two")
            Text("Three")
        }
    }
}

마찬가지로 ZStack으로 변경 후 실행해보겠습니다.

 

어떤 느낌인지 아시겠나요??

 

더 쉽게 이해하기 위해 도형을 통해 알아보도록 하겠습니다.

 

struct ContentView: View {
    var body: some View {
        ZStack{
            Color.red
                .frame(width: 100, height: 100)
                .offset(x: 0, y: 0)
            Color.green
                .frame(width: 100, height: 100)
                .offset(x: 10, y: 10)
            Color.blue
                .frame(width: 100, height: 100)
                .offset(x: 20, y: 20)
        }
    }
}

100 * 100 크기의 빨강, 초록, 파랑 뷰를 만들었습니다.

 

ZStack은 나중에 추가된 뷰일 수록 더 높은 Z좌표를 부여합니다.

따라서 가장 먼저 추가된 빨강 뷰가 가장 아래쪽에 놓이고 가장 나중에 추가된 파랑 뷰가 가장 위쪽에 놓이게 되는 것이죠.

 

배경이 필요한 경우나 뷰들이 오버레이 되는 경우가 필요할 때 사용할 수 있습니다.

---

위와 같이 Stack들을 생성하게 되면 기본적으로는 가운데 정렬입니다.

 

Stack을 생성할 때 alignment 옵션을 통해 정렬 방향을 정할 수 있습니다.

HStack, ZStack도 정렬 가능

 

VStack을 leading 정렬한 결과입니다.

 

또한 VStack과 HStack의 경우에는 뷰들 사이의 공간을 결정할 수 있습니다.

spacing을 100으로 설정한 결과입니다.

---

Ref.

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

Apple Developer Documentation