[SwiftUI] Spacer

• Spacer은 기본적으로 사용가능한 공간 전부를 채운다.

var body: Some View {
	VStack(spacing: 0) {
    	HStack {
        	Image(systemName: "suit.heart.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
        }
        .padding()
        .background(Color.blue)
        
        Spacer()
        
        VStack {
        	Image(systemName: "suit.spade.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
        }
        .padding()
        .background(Color.red)
        
    }
}

---

• Spacer가 추가되면 임베드하고 있는 뷰도 확장된다.
• 여백없이 배치한다면 safeArea로 자동으로 확장된다.

var body: Some View {
	VStack(spacing: 0) {
    	HStack {
        	Image(systemName: "suit.heart.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
        .background(Color.blue)
        ...
    }
}

• 확장되지 않길 원한다면 위에 Spacer 추가 후 frame 모디파이어로 1

var body: Some View {
	VStack(spacing: 0) {
    	Spacer()
        	.frame(height: 1)
            
    	HStack {
        	Image(systemName: "suit.heart.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
        .background(Color.blue)
        ...
    }
}

• 혹은 padding 이용

var body: Some View {
	VStack(spacing: 0) {      
    	HStack {
        	Image(systemName: "suit.heart.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
        .background(Color.blue)
        ...
    }
    .padding(.top, 1)
}

---

• Spacer는 사용 가능한 여백을 사용한다.

var body: Some View {
	VStack(spacing: 0) {
    	HStack {
        	Image(systemName: "suit.heart.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
        .background(Color.blue)
        
        Spacer()
        
        VStack {
        	Image(systemName: "suit.spade.fill")
            .resizable()
            .frame(width: 70, height: 70)
            .foregroundColor(.white)
            
            Spacer()
        }
        .padding()
        .background(Color.red)
        
        Spacer()
        Spacer()
    }
}

---

파라미터로 값 전달하기

• 고정값이 아닌 최솟값 전달 가능

Spacer(minLength: 50)

고정값을 원한다면

1. 모든 여백의 크기가 같다면 VStack에서 Spacing 프로퍼티로 원하는 크기 전달

VStack(spacing: 50) {
	...
}

2. Spacer마다 각각 크기를 고정적으로 전달하고자 한다면 frame 모디파이어 사용

Spacer()
	.frame(height: 50)