관리 메뉴

김종권의 iOS 앱 개발 알아가기

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

iOS 기본 (SwiftUI)

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

jake-kim 2022. 8. 29. 23:05

목차) 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

Comments