SwiftUI: Spacer (스페이서) – 공백 표시 뷰

소개

SwiftUI에서, 스페이서(Spacer)는 공백을 표시하는 View입니다.

VStack, HStack에서 사용할 수 있습니다.

참고) ZStack에서도 코드는 동작하지만 ZStack은 Z축의 스택이기 때문에 아래처럼 겹쳐 보입니다.

struct StacksView: View {
    var body: some View {
        ZStack {
            Text("가나다")
            Spacer()
            Text("ABC")
        }
    }
}

Spacer의 기본 사용법

HStack {
    Text("가나다")
    Spacer()
    Image(systemName: "play.fill")
}

• Spacer()는 View의 한 종류로 취급되므로 뷰처럼 사용하면 됩니다.
• 현재 공간에서 사용할 수 있는 최대한의 공백을 띄워줍니다.
• Text와 Image간 Spacer를 사용하면 텍스트, 이미지 부분을 제외한 나머지 영역 전부를 Spacer가 차지하게 됩니다.
• 다음과 같이 여러 Spacer를 사용할 수 있습니다.
  

  HStack {
      Text("가나다")
      Spacer()
      Image(systemName: "play.fill")
      Spacer()
      Text("ABC")
      Spacer()
      Image(systemName: "pause.fill")
  }

참고) Spacer 또한 View이기 때문에 스택 당 최대 뷰의 개수 10개를 초과하면 오류가 발생합니다.

Spacer의 공백 너비를 조절하는 방법

1) minLength 파라미터 지정

minLength를 지정하면 최소 너비(또는 높이)를 지정할 수 있습니다. 공백의 크기가 minLength보다 크다면 해당 크기로 표시되지만 공백의 크기가 minLength보다 작아지는 경우 minLength로 고정됩니다.

HStack {
    Text("가나다")
    Spacer(minLength: 300)
    Image(systemName: "play.fill")
    Spacer()
    Text("ABC")
    Spacer()
    Image(systemName: "pause.fill")
}

minLength를 지정한 경우

minLength가 없는 경우

2) frame에서 size를 지정

HStack이라면 width, VStack이라면 height를 지정하면 됩니다.

HStack(가로 스택)은 width

HStack {
    Text("가나다")
    Spacer()
        .frame(width: 30)
    Image(systemName: "play.fill")
    Spacer()
    Text("ABC")
    Spacer()
    Image(systemName: "pause.fill")
}

VStack(세로 스택)은 height

참고: Spacer 없이 Stack 내의 View간 간격을 조절하는 방법

spacing 파라미터를 사용하면 됩니다.

VStack(spacing: 50) {
    Text("가나다")
    Image(systemName: "play.fill")
    Text("ABC")
    Image(systemName: "pause.fill")
}