[SwiftUI] Group, GroupBox을 알아보자

여러가지 요소를 하나의 Component로 만들기 위해선 Container(빈 박스) 기능을 하는 요소가 필요하다. UIKit에서 이런 경우엔 빈 UIVIew를 하나 올린 뒤 그 안에 Text, Image 등의 요소를 더하는 식으로 구현했다. SwiftUI에서는 주로 VStack과 HStack을 이용하는데 비슷한 기능을 하는 Group과 GroupBox도 알아보자

 

Group

Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would. After creating a group, any modifier you apply to the group affects all of that group’s members. For example, the following code applies the headline font to three views in a group.

 

공식문서를 참조해보면 Group은 Stack과 마찬가지로 여러가지 view를 하나의 인스턴스로 만들 때 사용한다고 한다. 그리고 그룹에 스타일을 지정하면 그룹 내 멤버들에게 일괄적용해준다고 한다.

 

struct ContentView: View {
  var body: some View {
      NavigationView {
          VStack(spacing: 30) {
              Group{
                  Text("첫번째 Text")
                  Text("두번째 Text")
                  Text("세번째 Text")
              }.foregroundColor(.blue)
          }
      }
  }
}

 

위 코드의 결과를 보면 Group내의 Text 색이 모두 변한 것을 확인할 수 있다. (Stack도 마찬가지다)

VStack과 다른 점은 VStack은 요소 개수 제한(10)개가 있는 반면, Group은 없다고한다.

따라서 Group은 다음과 같은 상황에 사용하면 좋겠다.

1. 10개 이상의 요소를 나열해야할 때

2. 나열된 요소의 스타일을 일괄적으로 변경해야할 때

3. 요소의 논리적 구분이 필요할 때 (코드상의 구분)

 

GroupBox

Use a group box when you want to visually distinguish a portion of your user interface with an optional title for the boxed content.

struct ContentView: View {
  var body: some View {
      NavigationView {
          VStack(spacing: 30) {
              GroupBox{
                  Text("첫번째 Text")
                  Text("두번째 Text")
                  Text("세번째 Text")
              }
              .foregroundColor(.blue)
          }
      }
  }
}

 

보는 것처럼 Component 분리에 필요한 논리적 구분 뿐 아니라 시각적으로 구분해준다.

기본적으로 배경색이 들어간다.

 

struct ContentView: View {
    @State var userAgreed: Bool = true
    
    var body: some View {
        GroupBox(label:
            Label("End-User Agreement", systemImage: "building.columns")
        ) {
            ScrollView(.vertical, showsIndicators: true) {
                Text("orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
                    .font(.footnote)
            }
            .frame(height: 70)
            Toggle(isOn: $userAgreed) {
                Text("I agree to the above terms")
            }
        }
        .cornerRadius(20)
        .padding(30)
    }
}

 

공식문서의 예제를 사용해보았는데 응용하여 이런 카드 형태의 UI 컴포넌트를 생성할 수 있다.

 

---

Ref)

https://developer.apple.com/documentation/swiftui/group (Group 공식문서)

https://developer.apple.com/documentation/swiftui/groupbox (GroupBox 공식문서)

https://seons-dev.tistory.com/entry/SwiftUI-Form-Group-GroupBox (참고 블로그)