2021년 1월 3일 일요일

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)
}
}

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

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

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

아래 예에서는 둥근 사각형을 콘텐츠의 배경으로 사용하는 컨테이너를 만들었습니다. 콘텐츠 아래에는 두 개의 버튼이 있습니다. 콘텐츠 변수에 적용될 수정자를 살펴보십시오. 콘텐츠에는 크기 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()
}
}

수정자를 재정의하려면 원하는 값을 사용하여 클로저 내부 콘텐츠에 수정자를 추가해야합니다. .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(" ⭐️⭐️⭐️✯✮")
}
}
}
}
}

예 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()
}
}
}
}
}

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

댓글 2개:

  1. Playing roulette online has several of} advantages, considered one of which is the power heaps of|to avoid wasting} your individual customized wager layouts. This function permits you to simply repeat your favorite wagers, which is a convenient timesaver. Many online tables also embody an autoplay function, permits you to|which lets you} sit back and chill out while the sport performs out a set number of spins by itself. American Roulette by NetEntIn American roulette, the sport wheel consists of slots for numbers 1 카지노사이트 to 36, plus pockets for zero and 00 . There are two classes of bets in roulette, “outside bets” and “inside bets,” each of which have their execs and cons.

    답글삭제
  2. Following a set of pointers for slot game growth will ensure the the} success of the slot game. This slot machine tutorial has detailed the steps needed for slot game growth. In addition, extra data like slot game options, advantages, and costs have been bet365 defined.

    답글삭제