[SwiftUI] SwiftUI의 Stack(HStack, VStack, ZStack)

SwiftUI의 Stack(HStack, VStack, ZStack)

SwiftUI 에서 View에 뭔가를 줄지어서 나열하고 싶을때는 Stack 이란것을 사용한다.

Stack은 3종류가 있다.

• HStack
  Horizontal Stack 이며 Item 들을 수평으로 배열한다. (X 축 배열)
• VStack
  Vertical Stack 이며 Item 들을 수직으로 배열한다. (Y 축 배열)
• ZStack
  Item 들을 오버레이 하며 두축으로 배열한다. (Z 축 배열)

간단하게 말하자면 View 내부에 Item 들을 배열할 때 X,Y,Z 축을 기준으로 배열 할 수 있다.

그렇다면 어떻게 사용하며 어떤 식으로 보여질까?

HStack

HStack 은 X축, 즉 수평 방향으로 Item 들을 나열 할 수 있다.
다음의 코드가 어떻게 표현되는지 살펴보면 이해가 빠를 것이다.

struct StackViewTest: View {
    var body: some View {
        HStack {
            Text("피카츄")
                .padding()
                .background(Color.yellow)
            Text("파이리")
                .padding()
                .background(Color.red)
            Text("꼬부기")
                .padding()
                .background(Color.blue)
            Text("이상해씨")
                .padding()
                .background(Color.green)
        }
    }
}

HStack 으로 묶여 있기 때문에 위 항목들은 다음과 같이 수평으로 배치된다.

VStack

VStack 은 Y 축, 즉 수직 방향으로 Item 들을 나열 할 수 있다.
HStack 에서의 코드에서 HStack을 VStack 으로만 변경해보자!

    var body: some View {
        VStack {
            Text("피카츄")
                .padding()
                .background(Color.yellow)
            Text("파이리")
                .padding()
                .background(Color.red)
            Text("꼬부기")
                .padding()
                .background(Color.blue)
            Text("이상해씨")
                .padding()
                .background(Color.green)
        }
    }
}

ZStack

ZStack 은 이름대로 Z 축 기준으로 Item 들을 나열할 수 있다.
HStack, VStack은 2차원의 개념이였다면 ZStack은 약간의 3차원의 개념이 들어간다.
다음 그림을 보면 보다 쉽게 이해 할 수 있을 것이라 생각된다.

이런식으로 Item 들을 Z축을 기준으로 나열할 수 있다.
간략한 코드로 한번 더 살펴보도록 하자!

struct StackViewTest: View {
    var body: some View {
        ZStack {
            Text("피카츄")
                .padding()
                .frame(width: 300, height: 300, alignment: .center)
                .background(Color.yellow)
            Text("파이리")
                .padding()
                .frame(width: 250, height: 250, alignment: .center)
                .background(Color.red)
            Text("꼬부기")
                .padding()
                .frame(width: 200, height: 200, alignment: .center)
                .background(Color.blue)
            Text("이상해씨")
                .padding()
                .frame(width: 150, height: 150, alignment: .center)
                .background(Color.green)
        }
    }
}

좀 더 보기 편하기 위하여 Text의 프레임 Size를 조정해 보았다.
어느정도 이해가 되었는가??

우리는 H,V,Z Stack 들을 이용하여 Swift의 View를 자유롭게 구성할 수 있을 것이다!!
물론 위 3개를 조합하여 적재 적소에 활용할 수도 있다.
다음의 간략한 예시를 살펴보자

struct StackViewTest: View {
    var body: some View {
        VStack {
            HStack{
                Text("피카츄")
                    .padding()
                    .frame(width: 100)
                    .background(Color.yellow)
                Spacer()
                Text("전기 포켓몬")
                    .padding()
            }
            .border(Color.black)

            HStack{
                Text("파이리")
                    .padding()
                    .frame(width: 100)
                    .background(Color.red)
                Spacer()
                Text("불 포켓몬")
                    .padding()
            }
            .border(Color.black)

            HStack{
                Text("꼬부기")
                    .padding()
                    .frame(width: 100)
                    .background(Color.blue)
                Spacer()
                Text("물 포켓몬")
                    .padding()
            }
            .border(Color.black)

            HStack{
                Text("이상해씨")
                    .padding()
                    .frame(width: 100)
                    .background(Color.green)
                Spacer()
                Text("풀 포켓몬")
                    .padding()
            }
            .border(Color.black)

        }
        .padding()

    }
}

VStack 으로 항목들이 나열되어 있고 각각의 항목은 HStack으로 묶여 있는 것을 볼 수 있다.
HStack 에는 포켓몬의 이름과 속성이 적혀있다.
이와같이 Stack 들을 활용해서 View를 구성할 수 있고 Stack 안에는 Text 뿐 아니라
다양한 Item(Butten, View, Editbox) 등을 넣어서 우리가 원하는 View 를 꾸밀 수 있다.

참고자료

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