23.12.13 TIL SwiftUI 9. VStack, HStack, and ZStack

VStack, HStack, and ZStack

• 스택 안에 스택을 또 사용할 수 있고, 각각의 스택에 다른 속성을 줄 수도 있다. 각각의 스택에 다른 배경색을 줘서 구별을 쉽게할 수도 있다.
• 스택 안에 물체들은 spacing을 이용해서 간격을 조정할 수 있다.
• ZStack을 백그라운드처럼 쓸 수도 있다. 둘 중 뭘 쓸지는 상황에 따라 다르다

import SwiftUI

struct StacksBootcamp: View {
    // Vstacks -> Vertical
    // Hstacks -> Horizontal
    // Zstacks -> (which changes the) z-index(back to front)
    var body: some View {
        //ZStack을 background처럼 쓸수도 있다. 하지만 백그라운드를 먼저 쓰는 것이 우선시됨. 스택을 많이 쓸때 ZStack을 쓴다.
        //아래는 같은 것을 만들때 각각 ZStack과 background를 쓴 것이다.
        VStack(spacing: 50) {
            //ZStack으로 만들기
            ZStack {
                Circle()
                    .frame(width: 100, height: 100)
                
                Text("1")
                    .font(.title)
                    .foregroundColor(.white)
            }
            
            //Background로 만들기
            Text("1")
                .font(.title)
                .foregroundColor(.white)
                .background(
                    Circle()
                        .frame(width: 100, height: 100)
                )
            
        }
        

        //-----------------------------------------------------------------------------
        
        
        // a real world example
         VStack(alignment: .center, spacing: 20) {
             Text("5")
                 .font(.largeTitle)
                 .underline()
             
             Text("Items in your cart")
                 .font(.caption)
                 .foregroundColor(.gray)
         }
        
         
        //-----------------------------------------------------------------------------
        
        
        
        ZStack(alignment: .top) {
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 350, height: 500, alignment: .center)
                
            VStack(alignment: .leading, spacing: 30) { //이렇게 스택별로 각각 alignment와 spacing을 설정할 수 있다
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 150, height: 150)
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 100)
                
                HStack(alignment: .bottom) { //이렇게 Stack 안에 Stack을 넣을 수도 있다.
                    Rectangle()
                        .fill(Color.purple)
                        .frame(width: 50, height: 50)
                    
                    Rectangle()
                        .fill(Color.pink)
                        .frame(width: 75, height: 75)
                    
                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: 25, height: 25)
                }
                .background(Color.white) //HStack의 배경색을 바꿈
            }
            .background(Color.black) //VStack의 배경색을 바꿈
            
            
        }
        
         //-----------------------------------------------------------------------------
        
        
        //spacing: 각각의 stack 사이의 간격을 조정한다. 0일 경우에는 간격이 없다
        HStack(alignment: .bottom, spacing: 0, content: {
            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
            
            Rectangle()
                .fill(Color.green)
                .frame(width: 150, height: 150)
            
            Rectangle()
                .fill(Color.orange)
                .frame(width: 100, height: 100)
        })
        
        
    }
}

#Preview {
    StacksBootcamp()
}

ZStack과 background로 같은 결과물 만들기