[iOS][SwiftUI] Spacer 정리

Spacer : View 사이에 유연하게 공간 추가

Spacer

Text 뷰아래 Spacer를 추가하면

VStack {
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
}

위아래 다 추가하면

VStack {
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
}

VStack {
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
}

다중 spacer시 예측 요령

ui를 구성하다보면 머릿속으로 예측할 경우가 많습니다. 때문에 요령을 적어봅니다.

우선 알고 있는 사실을 짚어봅니다.

• spacer는 화면별 간격을 채우고 여러개의 spacer가 있다면 화면에 맞춰 분할되어 공간을 차지합니다.
• Spacer는 컨테이너의 frame에 영향을 미칩니다.

아래 코드와 결과 화면을 보자

VStack {
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
    Text("Tunko").foregroundColor(Color.white).frame(width: 100, height: 100).border(Color.black, width: 1).background(Color.blue)
    Spacer()
    Spacer()
    Spacer()
}

Text 뷰3개 Spacer 5개가 들어갔습니다.
그럼 화면 예측시에는

1. 컨테이너의 전체크기 (여기선 높이 값이 됩니다.)
2. Text뷰의 높이 100
3. Spacer가 5개 입니다.

(컨테이너높이 - Text높이) / spacer = *spacer 하나가 차지하는 공간을 알 수 있습니다. *
잘 예측해서 UI 를 후딱 배치합시다!