03 ~ 04. Spacer & Group

Spacer

---

struct View_Spacer: View {
   var body: some View {
      VStack(spacing: 0) {
         HStack {
            Image(systemName: "suit.heart.fill")
               .resizable()
               .frame(width: 70, height: 70)
               .foregroundColor(.white)
         }
         .padding()
         .background(Color.blue)

        Spacer()

         VStack {
            Image(systemName: "suit.spade.fill")
               .resizable()
               .frame(width: 70, height: 70)
               .foregroundColor(.white)
         }
         .padding()
         .background(Color.red)
      }
   }
}

 

Spacer는 Stack 내의 사용 가능한 공간 모두를 채우는 View다.
VStack에서는 높이에, HStack에서는 너비에 해당한다.

Spacer를 Embed 하면 인접한 Container까지 확장되고.
Spacer를 최상위에 배치하면 SafeArea로 자동 확장된다.

Spacer의 생성사 파라미터는 최소 길이를 의미하며 기본값은 nil이다.

고정값 사용하기

• 모든 여백의 크기가 같은 경우 Stack의 Spacing Property로 지정한다.
• Spacer마다 고정 크기가 필요한 경우 frame modifier를 사용한다.

SafeArea 보존하기

작성 시점의 Xcode에선 보이지 않는데, 이전 버전에서는 Spacer를 사용하게 되면
SafeArea를 침법하는 문제가 있었다. 해결법은 다음과 같다.

• embed 상단에 1 만큼의 Spacer를 추가한다.
• Stack에 padding modifier를 추가한다.

 

Group

---

SwiftUI는 Child의 수가 10개로 제한된다.

View의 Content 파라미터는 ViewBuilder라는 특성을 가지고 있고,
이 ViewBuilder는 여러 개의 ChildView를 나열하는 역할을 한다.
내부적으로 BuildBlock 메서드를 호출하며
문제는 ViewBuilder가 BuildBlock을 최대 10번밖에 호출하지 못하도록 구현돼 있다는 것이다.

이는 '하나의 계층'에서 최대 10번 호출할 수 있다는 뜻이기 때문에 nested 방식으로 구현해 간단히 해결할 수 있다.
이 과정에서 Section, Stack을 사용하면 불필요한 특성이 적용되는 경우가 있는데,
이를 해결하기 위해 사용하는 것이 Group이다.

struct View_Group: View {
   var body: some View {
       VStack {
           Group {
               Text("Hello, World!")

               Text("Hello, World!")

               Text("Hello, World!")

               Text("Hello, World!")

               Text("Hello, World!")
           }
           .font(.largeTitle.bold())
           .foregroundColor(.red)

           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
           Text("Hello, World!")
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)
       }
   }
}

 

Goup은 Child의 논리적인 분리를 가능하게 하며,
공통의 modifier를 상위 계층으로 분리하는 것이 가능하다.