[SwiftUI] 공식문서 파헤치기 (3) [Spacer / Divider]

Spacer

Spacer | Apple Developer Documentation

 

주축을 포함하는 Stack Layout에서 팽창하거나 Stack 안에서 두 축 위에 포함되지 않는 유연한 빈 공간

 

Spacer는 뷰와 대응하여 내용 없이 최대로 팽창하며 생성할 수 있습니다.

 

아래는 Spacer를 활용한 예시 코드입니다.

 

1. Spacer를 사용하기 전의 코드

struct ChecklistRow: View {
    let name: String


    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Text(name)
        }
        .border(Color.blue)
    }
}

 

Result

 

2. Spacer가 포함된 코드

struct ChecklistRow: View {
    let name: String


    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text(name)
        }
        .border(Color.blue)
    }
}

 

Result

 

Spacer()의 위치에 따라 결과가 달라진다.

 

3. Spacer를 Image와 Text 사이에 배치한 코드

struct ChecklistRow: View {
    let name: String


    var body: some View {
        HStack {
            Image(systemName: "checkmark")
            Spacer()
            Text(name)
        }
        .border(Color.blue)
    }
}

 

Result

 

 

4. Spacer()가 여러 번 사용된 코드

struct ChecklistRow: View {
    let name: String


    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "checkmark")
            Text(name)
            Spacer()
        }
        .border(Color.blue)
    }
}

 

Result

 

 

Spacer가 minLength (Instance Property) 사용할 수 있다.

 

minLength : Spacer가 확장 축을 따라 수축할 수 있는 최소 길이

minLength | Apple Developer Documentation

 

 

---

Divider : 다른 Content를 나눌 때 사용하는 visual 요소

Divider | Apple Developer Documentation