2023.04.18 – SwiftUI 스택(1)

SwiftUI에서 스택은 뷰를 수직 또는 수평으로 쌓을 수 있는 컨테이너입니다.

VStack, HStack 및 ZStack의 세 가지 유형이 있습니다.

1. V스택

VStack을 사용하면 뷰를 수직으로 쌓을 수 있습니다. 첫 번째 코드는 위에서 아래로 순서대로 배치됩니다.

VStack {
	Text("Hello")
    Text("Hi")
    Image("carrots")
}


VStack 적용 예시

2. H스택

HStack을 사용하면 뷰를 수평으로 쌓을 수 있습니다. 코드가 처음 작성된 순서대로 왼쪽에서 오른쪽으로 위치합니다.

HStack {
	Text("Hello")
    Text("Hi")
    Image("carrots")
}


HStack 적용 예시

3. 지스택

마지막으로 ZStack을 사용하면 뷰를 겹쳐 쌓을 수 있습니다. Z축이라고 생각하시면 됩니다.

처음 작성된 순서대로 뒤에서 앞으로 위치합니다.

ZStack {
            Image("carrots")
                .resizable()
                .frame(width: 100, height: 100)
            Text("Hello")
                .foregroundColor(.blue)
                .bold()
            Text("Hi")
                .padding()
}


ZStack 적용 예시

다음 글에서는 ‘Stack’의 다양한 속성에 대해 써보도록 하겠습니다.