SwiftUI 에서 제공하는 가장 기본적인 뷰 컨테이너로 HStack, VStack, ZStack 이 있다.

이들은 단순히 하위 뷰들을 정렬하는 방식에 차이가 있다.
HStack은 하위 뷰를 가로로 정렬하고, VStack은 세로로, ZStack은 뷰들을 층으로 쌓는다.

HStack

뷰를 가로로 정렬하고 싶다면 HStack을 사용한다

struct HStackEx: View {
    var body: some View {
        HStack(alignment: .top, spacing: 12) {
            Text("Text1")
            Text("Text2")
            Text("Text3")
            Text("Text4")
            Text("Text5")
        }
    }
}

생성자 파라미터인 alignment와 spacing을 사용하여 하위 뷰의 세부 정렬을 어떻게 할 것인지 설정할 수 있다

• alignment: 세로 방향 정렬
• spacing: 하위 뷰들의 간격

VStack

뷰를 세로로 정렬하고 싶다면 VStack을 사용한다

struct VStackEx: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Text1")
            Text("Text2")
            Text("Text3")
            Text("Text4")
            Text("Text5")
            Text("Text6")
            Text("Text7")
            Text("Text8")
            Text("Text9")
            Text("Text10")
        }
    }
}

• alignment: 가로 방향 정렬

ZStack

뷰를 겹쳐서 쌓고 싶다면 ZStack을 사용한다

struct ZStackEx: View {
    var body: some View {
        ZStack {
            Text("1")
                .font(.largeTitle)
                .frame(width: 300, height: 300, alignment: .top)
                .background(Color.red)
            Text("2")
                .font(.largeTitle)
                .frame(width: 200, height: 200, alignment: .top)
                .background(Color.blue)
            Text("3")
                .font(.largeTitle)
                .frame(width: 100, height: 100, alignment: .top)
                .background(Color.green)
        }
    }
}

• alignment: 가로/세로 방향 정렬