[SwiftUI] Spacer 뷰 기본 사용방법 및 예제

Spacer는 뷰 사이의 간격 또는 뷰의 크기를 확장할 때 사용되는 레이아웃을 위한 뷰입니다.

Spacer 특성

• 스택 외부에서 사용될 때  –> 단독 사용시 부모 뷰가 제공하는 공간 내에서 최대 크기로 확장됨, 시각적 요소를 적용할 수 있는 하나의 뷰로 사용됨 ( 단, HStack, VStack 내에서 사용되는 경우 시각적 요소는 제외됨, 공간만 차지하는 역할,  단독으로 사용시 뷰가 없는 것처럼 취급됨.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Spacer().background(Color.yellow)
    }
        
}

스택 외부에서 쓰였을 때만 배경색이 반영된다고 나왔으나 적용되지 않았습니다. 버전업데이트 되면서 바뀐듯???

• 스택 내부에서 사용될 때  –>  시각효과 무시됨

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer().background(Color.blue)
            Text("hello").font(.title).background(Color.yellow)
        }
    }
}

[프리뷰 결과]

“hello” 텍스트 크기 영역을 제외한 왼쪽의 나머지 공간을 모두 차지하게됨, Spacer의 배경색 무시됨

HStack {
    Spacer().background(Color.blue)
    Text("hello").font(.title).background(Color.yellow)
}.background(Color.green)

HStack의 배경색을 지정하면 Spacer가 차지하는 공간을 확인할 수 있음

Spacer의 길이 제한

frame수식어를 사용하여 제한을 둘 수 있고, minLength의 값을 설정시 최소 간격을 지정할 수 있음

Spacer().frame(width: 100, height: 100)

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Spacer MinLength").font(.title).foregroundColor(.white)
            Spacer(minLength: 100)
            Text("hello").font(.title).background(Color.yellow)
        }.background(Color.green)
    }
}

ZStack에서 Spacer를 대신할 수 있는 뷰

Color.clear 나 Rectangle 처럼 부모 뷰의 크기만큼 확장성 지닌 뷰

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.clear
            Text("Spacer MinLength").font(.title).foregroundColor(.white)
//            Spacer()
            Text("hello").font(.title).background(Color.yellow)
        }.background(Color.green)
    }
}

<프리뷰 결과>

Color.clear를 사용하여 부모뷰 크기만큼 확장됨

Spacer를 이용한 배치방법 예제

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("제목").font(.largeTitle).foregroundColor(.white)
            Text("서브 제목")
            Spacer()
            Text("본문 내용")
            Spacer()
            Spacer()
            Text("각주").font(.body)
        }.font(.title)
            .frame(width: 200, height: 350)
            .padding()
            .border(Color.blue, width:3)
    }
}

<프리뷰 결과>

Spacer는 다양한 형태로 사용될 수 있기 때문에 여러가지 테스트를 해보면서 감을 익혀야 합니다.

위 포스팅 내용들은 “스윗한 SwiftUI(이봉원 지음)” 전자책을 보고 스터디 및 실습한 내용들을 기록하였습니다.