SwiftUI : Divider 구분선

 

Divider에 대해 알아보도록 합시다

Divider

Divider는 하나의 Contents와 다른 Contents를 구분하는 뷰입니다. 

Divider는 간단하게 선언만 해주면 되는데, 복잡하지 않습니다. 사용하는 방법은 코드로 확인해보도록 하겠습니다.

Horizontal Divider

var body: some View {
     //VStack으로 전체 화면을 40으로 할당
        VStack(spacing: 40){
            Group {
                //H_Divider
                Text("Horizontal Divider")
                Divider()
                Image(systemName: "a.circle.fill")
                Divider()
            }
        }

Vertical Divider

            Group {
                //2. V_Divider
                Text("Vertical Divider")
             //HStakc으로 가로 정렬
               HStack {
                    Divider()
                    Image(systemName: "b.circle.fill")
                    Divider()
                  //구분선 길이 조절
                }.frame(height: 100)
            }

Divider Color

            Group {
                //3. 색상
                Text("Divider 색상")
                Divider()
                    .background(Color.red)
                Image(systemName: "c.circle.fill")
                Divider()
                    .background(Color.red)
            }

Divider 길이 

            Group {
                //4. 길이
                Text("Driver 길이 조절")
                Divider()
                      //frame 으로 길이 조절
                    .frame(width: 200)
                Image(systemName: "d.circle.fill")
                Divider()
                    .frame(width: 300)
            }

전체 화면

 

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_Divider_TUT