[SwiftUI] Stack (VStack/HStack/ZStack)

Stack

뷰를 수직 또는 수평으로 정렬하는 데 사용되는 컨테이너입니다.

Stack을 사용해서 여러개의 뷰를 그룹화하고 레이아웃을 구성할 수 있습니다.

 

VSatck

뷰를 수직으로 쌓는 스택입니다. 선언된 순서대로 뷰들은  위에서 아래로 쌓이게 됩니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("First View")
            Text("Second View")
            Text("Third View")
        }
    }
}

Alignment

VStack에서 alignment 매개변수를 통해 하위 뷰의 정렬 방법을 지정할 수 있습니다. 

.leading을 선택하면 왼쪽을 기준으로,  .trailing을 선택하면 오른쪽을 기준으로, .center를 선택하면 중앙을 기준으로 정렬됩니다.

기본값은 center입니다. 

<- trailing           leading ->

LazyVStack

지연 로딩(lazy loading) 방식으로 동작하는 VStack입니다. 기본적으로 VStack과 비슷하지만, 화면에 표시할 때 필요한 뷰만 로드합니다. 많은 수의 항목을 표시하는 경우에 메모리 사용량을 줄여 성능을 향상시킬 수 있습니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1..<100) { number in
                    Text("Row \(number)")
                }
            }
        }
    }
}

 

HStack

뷰를 수평으로 쌓는 스택입니다. 선언된 순서대로 뷰들은 왼쪽에서 오른쪽으로 쌓이게 됩니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("First View")
            Text("Second View")
            Text("Third View")
        }
    }
}

Alignment

HStack에서 alignment 매개변수를 통해 하위 뷰의 정렬 방법을 지정할 수 있습니다. 

.top을 선택하면 위쪽을 기준으로,  .trailing을 선택하면 아래쪽을 기준으로, .center를 선택하면 중앙을 기준으로 정렬됩니다.

기본값은 center 입니다. 

 

차이를 비교하기 위해 두 번째 text에 크기를 지정해 주고, HStack 뷰에 배경 색을 회색으로 지정합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top) {
            Text("First View")
            Text("Second View")
                .frame(width: 100, height: 300)
            Text("Third View")
        }
        .background(Color.gray)
    }
}

<- top               bottom ->

LazyHStack

지연 로딩(lazy loading) 방식으로 동작하는 HStack입니다. 기본적으로 HStack과 비슷하지만, 화면에 표시할 때 필요한 뷰만 로드합니다. 많은 수의 항목을 표시하는 경우에 메모리 사용량을 줄여 성능을 향상시킬 수 있습니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(1..<100) { number in
                    Text("Item \(number)")
                }
            }
        }
    }
}

ZStack

뷰를 겹쳐서 쌓는 스택입니다. 선언된 순서대로 뷰들은 겹쳐서 쌓입니다. 가장 마지막에 선언된 뷰가 가장 위에 표시됩니다. ZStack은 뷰를 3D 공간에서 겹치게 하여 다양한 시각적 효과를 구현하는 데 사용됩니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
            
            Circle()
                .fill(Color.red)
                .frame(width: 150, height: 150)
        }
    }
}

ZIndex

ZStack에 속한 뷰의 순서를 설정하는 수정자입니다. zIndex를 사용하여 뷰의 정렬 순서를 수동으로 제어할 수 있습니다. 숫자가 작을수록 뒤에, 클수록 앞에 표시됩니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
                .zIndex(1)
            
            Circle()
                .fill(Color.red)
                .frame(width: 150, height: 150)
                .zIndex(0)
        }
    }
}

선언순서대로라면 위의 사진처럼 사각형 위에 원이 표시되어야 하지만, zIndex로 순서를 바꾸어 사각형이 더 위에 표시됩니다.

이렇게 하면 원이 보이지 않기 때문에 원의 크기를 (width: 300, height: 300)으로 변경하면 원 위에 사각형이 표시되는 것을 확인할 수 있습니다.

<- (width :  150 ,  height :  150 )                 (width :  300 ,  height :  300 ) ->