SwiftUI에서 @ViewBuilder를 사용하여 자신 만의 뷰 컨테이너 만들기

 

재사용 가능한 컨테이너 뷰를 구축하여 코드를 줄입니다.

빌더보기

@ViewBuilder클로저에서 뷰를 구성하는 함수 빌더입니다. 여러보기를 특정보기로 전달할 수 있습니다. 를 사용 @ViewBuilder하면 앱 전체에서 상수 요소와 수정자를 설정 한 다음 불일치 콘텐츠 만 추가 할 수 있습니다.

아래 예에서는 유형의 View일부 콘텐츠를 사용하는 유형 의 컨테이너를 만듭니다 View. body 변수 안에서 컨텐츠 변수에 수정자를 추가 한 것을 볼 수 있습니다. 수정자는이 컨테이너보기에 전달할 모든 콘텐츠에 적용됩니다.

	struct Container <Content : View> : View {
	var content : Content
	init(@ViewBuilder content: () -> Content) {
	self.content = content()
	}
	var body: some View {
	content
	.padding()
	.background(Color.green)
	.cornerRadius(20)
	}
	}

view rawViewBuilder-p1.swift hosted with ❤ by GitHub

내부 ContentView에 컨테이너를 추가 할 수 있습니다. 이 컨테이너 안에 필요한 UI 요소를 추가 할 수 있습니다.

	struct ContentView: View {
	var body: some View {
	Container {
	Text("This is my")
	Text("Container's content")
	}
	}
	}

view rawViewBuilder-p2.swift hosted with ❤ by GitHub

이제 비슷한 수정자가있는 모든 콘텐츠로 만든 컨테이너를 사용할 수 있습니다.

예

아래 예에서는 둥근 사각형을 콘텐츠의 배경으로 사용하는 컨테이너를 만들었습니다. 콘텐츠 아래에는 두 개의 버튼이 있습니다. 콘텐츠 변수에 적용될 수정자를 살펴보십시오. 콘텐츠에는 크기 20, 파란색 전경색 및 모든면에 패딩이있는 글꼴 수정자가 있습니다.

	struct Container <Content : View> : View {
	var content : Content
	init(@ViewBuilder content: () -> Content) {
	self.content = content()
	}
	var body: some View {
	ZStack {
	RoundedRectangle(cornerRadius: 20)
	.foregroundColor(Color.blue.opacity(0.3))
	VStack {
	Spacer()
	content
	.font(.system(size: 20))
	.foregroundColor(.secondary)
	.padding()
	Spacer()
	Divider()
	HStack {
	Button(action: {
	// action
	}) {
	Image(systemName: "hand.thumbsup")
	}.frame(width: 150)
	Divider()
	Button(action: {
	// action
	}) {
	Image(systemName: "hand.thumbsdown")
	}
	.frame(width: 150)
	}
	.font(.system(size: 20))
	.frame(height: 50)
	.padding()
	}
	}
	.padding()
	}
	}

view rawViewBuilder-p3.swift hosted with ❤ by GitHub

수정자를 재정의하려면 원하는 값을 사용하여 클로저 내부 콘텐츠에 수정자를 추가해야합니다. .NET에서 Container뷰가 사용되는 방식을 보여주는 아래 코드 스 니펫을 확인 하세요 ContentView.

	struct ContentView: View {
	var body: some View {
	Container {
	ZStack {
	RoundedRectangle(cornerRadius: 20)
	.foregroundColor(Color.red.opacity(0.4))
	VStack {
	Text("My Photo")
	.bold()
	.font(.system(size: 25))
	.padding()
	Image(systemName: "person.crop.rectangle")
	.foregroundColor(.white)
	.font(.system(size: 200))
	.padding()
	Text("Photo description is here.")
	.padding()
	Text(" ⭐️⭐️⭐️✯✮")
	}
	}
	}
	}
	}

view rawViewBuilder-p4.swift hosted with ❤ by GitHub

예 1 : 컨테이너보기 사용 방법

	struct ContentView: View {
	var body: some View {
	Container {
	ZStack {
	RoundedRectangle(cornerRadius: 20)
	.foregroundColor(Color.purple.opacity(0.4))
	VStack {
	Image(systemName: "person.crop.rectangle.fill")
	.foregroundColor(.white)
	.font(.system(size: 200))
	.padding()
	Text("My Photo")
	.padding()
	}
	}
	}
	}
	}

view rawViewBuilder-p5.swift hosted with ❤ by GitHub

예 2 : 컨테이너보기를 사용하는 방