SwiftUI | ViewBuilder

SwiftUI 에서 View 구조체(struct)는 반드시 하나의 body를 가지고
body는 하나의 View를 가지고, 그 View는 다양한 하위 뷰를 구성하게 됩니다.


공통된 특징을 가지고 있는 View들을 통일시키기 위해서는
특징을 기준으로 컴포넌트를 만들 필요가 있겠지요.

공통된 특징 이외의 필요한 요소는 초기화시킬 때 값을 대입해야 되겠지요.

SwiftUI 에서 초기화할 때 자식뷰를 넣고, 특정한 특징을 가진 부모뷰를 정의할 때에 사용하는 것
바로바로 ViewBuilder 입니다 !

struct VStackComponent<Content: View>: View {
    let content: () -> Content // ⭐️

    init(@ViewBuilder content: @escaping () ->  Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            content()
        }.background(Color.red) //  ⭐️
    }
}

– 위와 같이 정의하면, 배경색이 무조건 빨간색인 VStack 뷰가 만들어지게 됩니다.
– 초기화 시킬 때 content 에 VStack 안에 소속될 자식뷰들을 넣어주면 되죠.

struct ContentView: View {
    var body: some View {
        VStackComponent {
                Text("Hello")
                Text("Hi")
            }
    }
}

– 실제 ContentView 에서는 요러케 쓰일 수 있겠죠 !


Sample

테두리를 가진 VStack의 컴포넌트를 만들고 다양한 곳에서 활용해보기.

import SwiftUI

struct BorderVstackView<Content: View>: View {
    let content: () -> Content

    init(@ViewBuilder content: @escaping () ->  Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            content()
        }.border(Color.black, width: 3.0)
    }
}


struct ContentView: View {
    var body: some View {
        VStack {
            BorderVstackView {
                Text("Hello")
                Text("Hi")
            }
            BorderVstackView {
                Text("안녕하세요")
                Text("안녕")
            }
        }
    }
}




답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중