SwiftUI를 이용한 구분선 그리기 (Divider)

VStack이나 HStack 뷰로 여러 개의 뷰를 쌓을 때 구분되어야 하는 뷰도 있다. 그럴 때 Divider 뷰를 이용해 구분선을 짓는다.

 

기본코드

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack (spacing: 40) {
                    Text("Menu")
                    Divider()
                    Image(systemName: "a.circle.fill")
                    Divider()
                }
    }
}

 

실행화면

---

Divider 색상

• 색상은 background 속성을 이용해 구분선의 색상을 지정한다.

Group {
    Text("Divider 색상")
    Divider()
        .background(Color.blue)
    Text("Divicder 색상2")
    Divider()
        .background(Color.red)
}

 

실행화면

 

 

Divider 길이

• Divider는 기본적으로 화면의 세로 폭이나 가로폭 만큼 그린다. 하지만 길이를 제한하고 싶을 때가 있다. 그럴때 Divider의 길이를 조정한다.

VStack (spacing: 40) {
      Group {
          Text("Divider 색상")
          Divider()
              .frame(width: 100)
              .background(Color.blue)
          Text("Divicder 색상2")
          Divider()
              .frame(width: 200)
              .background(Color.red)
      }
  }

 

실행화면

---

개발자 Document

Apple Developer Documentation