[iOS - SwiftUI] Spacer, Divider 사용 방법

목차) SwiftUI의 기본 - 목차 링크

Spacer

https://developer.apple.com/documentation/swiftui/spacer

• Stack안에서 사용되며, Stack의 크기만큼 내부 크기의 공백이 채우고 싶을때 사용
• List와 row가 있을 때 row는 원래 좌측 정렬되어있지만, Spacer()를 추가하면 오른쪽 정렬로 변경

Spacer없는 경우	Spacer 추가한 경우

• 코드

struct ChecklistRow: View {
  let name: String
  
  var body: some View {
    HStack {
      Spacer() // <-
      Image(systemName: "checkmark")
      Text(name)
    }
    .border(Color.blue)
  }
}

struct ChecklistRow: View {
  let name: String
  
  var body: some View {
    HStack {
      Image(systemName: "checkmark")
      Spacer() // <-
      Text(name)
    }
    .border(Color.blue)
  }
}

• Spacer()를 뷰 바깥쪽에 각각 추가하면, 뷰가 중간으로 이동

struct ChecklistRow: View {
  let name: String
  
  var body: some View {
    HStack {
      Spacer() // <-
      Image(systemName: "checkmark")
      Text(name)
      Spacer() // <-
    }
    .border(Color.blue)
  }
}

Divider

https://developer.apple.com/documentation/swiftui/divider

• 단순히 구분선 구현에 사용

Text("Some Text1")
Divider()
Text("Some Text2")

• 수직 구분선
  • VStack이랑 같이 사용

HStack {
  Text("Some Text3")
  Divider()
  Text("Some Text4")
}

 

• 색상, 길이 모두 일반 뷰 프로퍼티에 접근하여 지정해주듯이 가능

Text("Some Text1")
Divider()
  .frame(width: 200)
  .background(.blue)
Text("Some Text2")

* 전체 코드: https://github.com/JK0369/ExSpacerDivider

* 참고

https://developer.apple.com/documentation/swiftui/divider

https://developer.apple.com/documentation/swiftui/spacer