[SwiftUI] VStack, HStack, ZStack

VStack, HStack, ZStack

 

✅ 스택뷰에 대해서 알아보자.

 

✅ VStack

import SwiftUI

struct MyVstack : View {
    
    var body: some View {
    		// VStack에는 기본적인 spacing이 있어서 0으로 해주기 
            // alignment는 정렬 옵션
            VStack(alignment: .trailing, spacing: 0) {
                        
                        // 우측으로 붙이기 위한 3가지 방법!
                        // 공간을 아예 주어서 정렬하기
            //            Spacer() 
                        
                        // opacity(0) 통해서 선을 안보이게 한다.
                        Divider().opacity(0)
                        
                        // 아예 Rectangle 하나 더 만들기
            //            Rectangle()
            //                .frame(height: 1)
                        
                        // 
                        Text("글자")
                            .font(.system(size: 30))
                            .fontWeight(.heavy)
            //                .padding(.bottom, 100) // 아래에 여백주기
                        
                        Rectangle()
                            .frame(width: 100, height: 100)
                            .foregroundColor(Color.red)
            //                .padding(.vertical, 100) // 수직으로 여백주기 
                            
                        Rectangle()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.yellow)
                        
                        // spacer를 활용해서 원하는 만큼 크기 조절
                        Spacer()
                            .frame(height: 50)
                        
                        Rectangle()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.blue)
                        
                        // 위에 Spacer 1개 아래에 3개 두어서 위아래로 1:3 만큼 공간을 확보함
            //            Spacer()
            //            Spacer()
            //            Spacer()
                        
                    } // VStack
                    .frame(width: 300) // width만 300 height는 자동지정
                    .background(Color.green) 
            //        .edgesIgnoringSafeArea(.all)
                    
                
    }
}

VStack

✅ HStack

import SwiftUI

struct MyHstack : View {
    var body: some View {
        
        HStack(alignment: .center) {
            
//            Divider()
            
//            Rectangle()
//                .frame(width: 100)
//            .foregroundColor(.red)
            
//            Rectangle()
//                .frame(width: 100, height: 100)
//                .foregroundColor(.red)
            
            Image(systemName: "flame.fill")
                .foregroundColor(.white)
                .font(.system(size: 70)) // systemImage에서 크기 조절하는 방법
            
            
            Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.yellow)
            
            Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.blue)
            
        }
        .padding()
        .background(Color.green)
        
    }
}

HStack

✅ ZStack

zIndex는 기본이 0이며, 0층부터 숫자가 높아질 수록 위에 있다고 생각하기.

 

import SwiftUI

struct MyZstack : View {
    var body: some View {
        
        ZStack {
            
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
                .zIndex(2) // zIndex통해서 index조정
                .offset(y: -100)
//                .padding(.bottom, 100)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
                .zIndex(1)
            
            Rectangle()
                .frame(width: 150, height: 150)
                .foregroundColor(Color.blue)
                .zIndex(0)
        }
        
    }
}