SwiftUI - Stack

안녕하세요.🙌

오늘은 SwiftUI로 스택을 만드는 법을 소개하겠습니다~

스택에는 세가지가 있습니다.
VStack, HStack, ZStack이 있습니다.
하나씩 알아보겠습니다~

VStack

VStack은 Vertical Stack 입니다!

사용법은 역시나 간단합니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("하나")
            Text("둘")
            Text("셋")
        }
    }
}

Stack은 alignment, spacing을 설정해줄 수 있습니다!
alignment의 디폴트는 center로 되어 있습니다. 그래서 위의 사진을 보면 가운데 정렬이 되어있는 것을 확인할 수 있습니다.
VStack의 alignment는 leading, center, trailing이 있습니다.

또한 Text처럼 배경색, 패딩, 테두리 등 여러가지 설정을 해줄 수 있습니다!!

struct ContentView: View {
    var body: some View {
    	// alignment, spacing 설정
        VStack(alignment: .leading, spacing: 10) {
            Text("하나")
            Text("둘")
            Text("셋")
        }
        .background(Color.yellow) // 배경색
        .padding() // 패딩
        .border(.blue, width: 2) // 테두리
    }
}

HStack

HStack 사용법은 똑같습니다.
HStack은 Horizontal Stack이겠죠?
현재로서 다른점은 alignment가 leading, center, trailing이 아닌 top, center, bottom이 있습니다.

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top, spacing: 10) {
            Text("하나\n일")
            Text("둘")
            Text("셋")
        }
        .background(Color.yellow)
        .padding()
        .border(.blue, width: 2)
    }
}

ZStack

마지막으로 ZStack입니다.
저는 ZStack은 생소했는데요!

ZStack은 앞으로 쌓인다? 겹친다?의 느낌입니다.
x, y, z 축할 때 z축 처럼 앞으로 겹치게 됩니다!
그래서 ZStack이 아닐까요..? 조심스럼게 예측해봅니다 ㅎ

코드를 보시면 이해하실 수 있을거에요!

struct CustomRectangleView: View {
    var body: some View {
        ZStack { // ZStack은 겹치는 스택 XYZ축 중에 Z축 방향으로 스택을 쌓아 나간다.
            Rectangle() // 사각형을 만듦
                .frame(width: 90, height: 90) // frame 설정
                .foregroundColor(.yellow) // 도형색 설정
            Rectangle()
                .frame(width: 70, height: 70)
                .foregroundColor(.purple)
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(.orange)
        }
    }
}

위 코드와 프리뷰를 보시면 먼저 변의 길이가 90인 정사각형 위에 변의 길이가 70인 정사각형, 그 위에 변의 길이가 50인 정사각형을 보실 수 있습니다.
이렇게 하나씩 넣을때마다 위에 겹치게 쌓는 스택입니다!!

나중에 다양하게 활용할 수도 있을 것 같아요!

오늘은 세가지 스택에 대해서 소개해보았습니다.
마지막으로 세가지 스택의 콜라보레이션 코드로 마치겠습니다.

// VStack, HStack
struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 20) { // alignment, spacing 설정
            HStack {
                CustomRectangleView()
                CustomRectangleView()
                CustomRectangleView()
            }
            HStack {
                CustomRectangleView()
                CustomRectangleView()
                CustomRectangleView()
            }
            HStack {
                CustomRectangleView()
                CustomRectangleView()
                CustomRectangleView()
            }
        }
        .padding() // padding 설정
        .background(Color.green) // 스택뷰의 배경색 설정
        .cornerRadius(20) // 스택뷰 라운드 설정
    }
}

// ZStack
struct CustomRectangleView: View {
    var body: some View {
        ZStack { // ZStack은 겹치는 스택 XYZ축 중에 Z축 방향으로 스택을 쌓아 나간다.
            Rectangle() // 사각형을 만듦
                .frame(width: 90, height: 90) // frame 설정
                .foregroundColor(.yellow) // 도형색 설정
            Rectangle()
                .frame(width: 70, height: 70)
                .foregroundColor(.purple)
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(.orange)
        }
    }
}

감사합니다~🙏