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")
}

[caption id=”attachment_5391” align=”alignnone” width=”430”] minLength를 지정한 경우[/caption]

 

[caption id=”attachment_5389” align=”alignnone” width=”434”] minLength가 없는 경우[/caption]

 

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")
}