Swift 기초부터 차근차근! (8) - Stack 알아보기

View를 나열하는 방법응 구분해주는 Stack은 종류가 3가지가 있습니다.

VStack

struct ContentView: View {
        
    var body: some View {
        VStack(alignment: .center, spacing: 14){
            Text("Hello")
            
            Text("How are you?")
            Text("oh!")
        }.background(Color.mint)
    }
}

수직으로 View가 쌓이는 것입니다.

HStack

struct ContentView: View {
        
    var body: some View {
        HStack(alignment: .center, spacing: 14){
            Text("Hello")
            
            Text("How are you?")
            
            Text("oh!")
        }.background(Color.mint)
    }
}

수평으로 View가 쌓이는 것입니다.

ZStack

struct ContentView: View {
        
    var body: some View {
        ZStack{
            Text("Hello")
            
            Text("How are you?")
            
            Text("oh!")
        }.background(Color.mint)
    }
}

View가 겹쳐져서 나오는 것입니다.

이러한 Stack을 사용할 때에는 주의해야 할 경우가 있습니다.
바로 Stack 안에서 사용되는 View의 갯수가 10개 이상일 경우 에러를 발생하기 때문입니다.

이러한 경우를 방지하기 위해서 사용하는 것이 바로 Group

struct ContentView: View {
        
    var body: some View {
        VStack(alignment: .leading, spacing: 10){
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
            Text("11") //error 발생
        }.background(Color.mint)
	}
}

struct ContentView: View {
        
    var body: some View {
        VStack(alignment: .leading, spacing: 10){
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Group{
                Text("5")
                Text("6")
                Text("7")
                Text("8")
                Text("9")
                Text("10")
                Text("11")
            }
            Text("12")
            Text("13")
        }.background(Color.mint)
    }
}

Group으로 묶인 부분을 하나의 View로 인식됩니다.
현재 코드에서는 Stack 안에 7개의 View가 존재하는 것으로 인식됩니다.