[SwiftUI] VStack

SwiftUI에서 VStack은 세로로 정렬된 뷰의 컨테이너입니다.

VStack은 Vertical Stack의 약자로, 포함된 뷰들을 위에서 아래로 쌓아 올리는 방식으로 레이아웃을 구성합니다.

 

 

SwiftUI 공식문서에 따르면 VStack은 alignment , spacing , content 의 매개변수를 받을 수 있습니다.

 

1. alignment

기본적으로 VStack은 뷰들을 중앙 정렬합니다.

하지만 alignment 매개변수를 사용하여 다른 정렬 방식으로 변경할 수 있습니다.

예를 들어, .leading, .trailing 등의 alignment 값을 지정할 수 있습니다.

 

• .center: 뷰를 수직 방향으로 중앙 정렬합니다. 이는 VStack의 기본 정렬 옵션입니다.
• .leading: 뷰를 수직 방향으로 왼쪽 정렬합니다.
• .trailing: 뷰를 수직 방향으로 오른쪽 정렬합니다.

코드를 통해 쉽게 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(alignment: .leading){
                Text("This")
                Text("leading")
            }.padding()  //왼쪽 정렬
            
            VStack(alignment: .trailing){
                Text("This")
                Text("trailing")
            }.padding()  //오른쪽 정렬
        }
    }
}

 

2. spacing

spacing은 포함된 뷰 사이의 수직 간격을 포인트 단위로 정의합니다.

양수 값이면 뷰들 사이에 간격이 생성되고, 음수 값이면 뷰들이 서로 겹쳐질 수 있습니다.

 

코드를 통해 쉽게 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) { 
            Text("View 1")
                .padding()
                .background(Color.blue)
            
            Text("View 2")
                .padding()
                .background(Color.red)
            
            Text("View 3")
                .padding()
                .background(Color.green)
        }
    }
}

spacing값이 0 일땐 뷰들이 간격없이 붙어있습니다.

 

 VStack(spacing: 50)

-spacing값이 50일때 

 

 

 

 

 VStack(spacing: -30)

-spacing값이 -30일때 

 

 

 

 

3. content

content는 View 를 포함하고 배치하는 컨테이너 역할을 합니다.

alignment의 .center처럼 기본으로 설정돼있어 써주지 않아도 됩니다.

 

코드로 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, content: {
            Text("Hello, world!")
                .padding()
        })
    }
}

위의 코드는 결과적으로 아래코드랑 같은 코드입니다. 

VStack에 기본으로 설정돼있기 때문에 굳이 써주지 않아도 되기 때문입니다.