23.12.14 TIL SwiftUI 11. How to use Spacer

How to use Spacer

• 버튼 위치 등을 내가 원하는대로 배치하고 싶을떄 패딩과 함께 사용한다
• 아직 백퍼 이해한거는 아닌거 같지만 감은 잡은 것 같다

import SwiftUI

struct SpacerBootcamp: View {
    var body: some View {
        //Spacer - 버튼 간격으로 원하는대로 배치하고 싶을때 등에 사용함
        VStack{
            HStack(spacing: 0) {
                
                Image(systemName: "xmark")
                Spacer()
                    .frame(height: 10)
                    //.background(Color.orange)
                Image(systemName: "gear")
                    
                
            }
            .font(.title) //이렇게 HStack에 .font를 적용하게 되면 위의 두 Images에도 모두 적용이 된다.
            //.background(Color.yellow)
            .padding(.horizontal)
            //.background(Color.blue)
            
            Spacer()
                .frame(width: 10)
                //.background(Color.orange)
            
            Rectangle()
                .frame(height: 55)
        }
        //.background(Color.yellow)
        
        
  //-----------------------------------------------------------------------------------      
        
        
        HStack(spacing: 0) {
            Spacer() //by default, Spacer is transparent. it pushes two Rectangles apart. it also automatically resizes.
                .frame(height: 10)
                .background(Color.orange)
            
            Rectangle()
                .frame(width: 50, height: 50)
            
            Spacer()
                .frame(height: 10)
                .background(Color.orange)

            Rectangle()
                .fill(Color.red)
                .frame(width: 50, height: 50)
                       
            Spacer()
                .frame(height: 10)
                .background(Color.orange)
            
            Rectangle()
                .fill(Color.green)
                .frame(width: 50, height: 50)
            
            Spacer(minLength: 0) 
            //minimal length도 설정할 수 있다. 이렇게 하면 간격이 없어진다. 디폴트 값은 8-10 정도이다. 
            //따라서 미니멈값을 0으로 설정하지 않으면 항상 간격이 생기게된다.
                .frame(height: 10)
                .background(Color.orange)
         
        }
        
        .background(Color.yellow)
        //.padding(.horizontal, 200)
        .background(Color.blue)
         
    }
}

#Preview {
    SpacerBootcamp()
}