[SwiftUI] HStack, VStack, ZStack 기본 레이아웃

 

레이아웃을 잡을줄 알아야 디자인을 원하는데로 넣어 볼 수도 있을거에요

SwiftUI가 아직 발전중이기도하고

비슷한 컴포넌트들이 되게많아서 여러 방법으로 구현할 수 있다는점 알아두시구요!

 

 

HStack, VStack, ZStack..?

H, V, Z 가 앞에 붙어있는 스택이네요

Horizontal

Vertical

Z .. 음 어떤 풀네임인진 잘모르겠지만 Depth를 나타내죠!

 

HStack의 생성자에요

하나씩 보면

파리미터1: 정렬

파라미터2: 간격

파라미터3: 무엇인가넣어주는 클로저네요?

@ViewBuilder..?! -> 나중에 다뤄보도록할게요

우선 뷰를 넣어줄 수 있는 클로저라고 생각하면되요!

 

처음 프로젝트를 만들면

some View 반환형을 볼 수 있어요

Opaque Type이라고 불리구요

어떤 뷰를 반환한다 라는 뜻은

반환형이 View여야만 하는게 아니라 View를 따르는 무엇이든 된다는 소리에요

 

예를들어

이렇게 Image, Text도 View프로토콜을 준수하고 있다면

반환형으로 Image, Text도 사용할 수 있다는거에요

 

따라서 HStack도 View프로토콜을 준수하니까 3번째 파라미터로 어떠한 뷰들을 감싸서 body안에 넣어 줄 수 있어요

 

 

오른쪽 창에있는 옵션중 Canvas를 클릭해서

SwiftUI의 장점이라고할 수 있는 실시간 디버깅을 통해서 바로 디자인이 적용된 뷰를 볼 수 있고

프리뷰를 실행하는 단축키는 커맨드 + 옵션 + P에요

 

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

잘나오네요!

 

VStack으로 변경해볼까요

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

정렬 옵션도 한번 추가해봤어요

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

 

영역을 눈에띄게 확인해보기위해 색을 지정해볼께요

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("하나").background(Color.red)
            Text("둘").background(Color.blue)
            Text("셋").background(Color.green)
        }
        .background(Color.gray)
    }
}

 

다음으로 ZStack

뷰의 앞뒤의 순서를 고려해줄 수 있는 기능을 담당해요

 

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red.frame(width: 100, height: 100)
            Color.blue.frame(width: 50, height: 50)
        }
        .background(Color.gray)
    }
}

 

코드의 순서를 바꾼다면??

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue.frame(width: 50, height: 50)
            Color.red.frame(width: 100, height: 100)
        }
        .background(Color.gray)
    }
}

이렇게 파란사각형이 빨간사각형 뒤로 가서 안보일거에요

ZStack은 뷰간 앞뒤의 순서를 변경해줄 수 있는 기능을 하죠

 

 

 

Color를 색으로 사용했는데 저기서는 ZStack에 View로 사용을했네요?

네 가능해요

SwiftUI에서 Color는 다양한 기능을 갖추고있어요

대표적으로 위처럼 View로서 기능을 담당할 수도있고

색으로도 사용할 수 있죠

 

그렇기때문에 API가 제한적이에요

색을 생성하거나 비교할 순 있지만

UIColor처럼 정교하게 색을 변경하면서 사용할 순 없어요